CSS 100 percent height body and element
Posted
by Tim
on Stack Overflow
See other posts from Stack Overflow
or by Tim
Published on 2010-06-05T21:28:57Z
Indexed on
2010/06/05
21:32 UTC
Read the original article
Hit count: 199
css
|css-layout
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>
</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.
© Stack Overflow or respective owner
