Menu
I am having an issue making one of my elements 100% within an overall layout that is 100%.
I have tried different positioning solutions and I either end up with hidden content the floats behind the footer at the bottom, or the content ends up going behind the footer, and carrys on after the footer.
Here is what I have for the page layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<style>
*{margin:0}
html,body{margin:0; padding:0; height:100%}
.wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
.container{width:930px; margin:0 auto; text-align:left}
.right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
.left{float:left; width:240px}
.content{padding:10px}
.footer{position:absolute; width:100%}
.footer,.push{height:200px}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
The layout for the page being 100% height and footer at the bottom works it just the div with the class name content that I would like to be 100% as well and push the footer further down if the content reaches the footer and not disappear.
Any help most appreciated.
http://img686.imageshack.us/img686/7725/screenshotbj.png
282
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
It just means 100% of the div or class or tag it is enclosed within.
Answering animuson: actually the following code is necessary for IE6 support:
min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
IE6 doesn't understand !important, but it does treat height as min-height. So to support both IE6 and modern browser you have to use the exact same code (order is important).
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
