CSS 100 percent height body and element
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/xh开发者_如何转开发tml" 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
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).
The correct css should look like this:
<style type="text/css" media="screen">
html,body
{
margin:0; padding:0; height:100%;
}
.wrapper
{
position:relative;
min-height:100%;
/*background: #fef;*/
}
.container
{
margin: 0 auto;
width: 930px;
padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
/*background: #fff; */
}
.left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
{
float: left;
width: 240px;
/*background: #efe;*/
}
.right
{
float: left;
width: 690px;
/*background: #efa;*/
}
.right .content
{
padding: 10px;
}
.clear
{
clear: both;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
/*background: #eff;*/
}
</style>
I'm sure this will help you.
<div class="wrapper">
<div class="container">
<div class="left">
left
</div>
<div class="right">
<div class="content">
content
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
footer
</div>
</div>
This will look like you wanted to have it. The footer is at the bottom, everytime, just as you wanted to have it :) Hope it helps!
Without being able to look at the code until a little later, I'd suggust putting the class "clearfix" onto the div that isn't fully expandning with the white.
Here is where you can get a good definition of what clearfix is, and a definition for the css.
Another solution is to use javascript (obviously not the cleanest way but in some cases it can be useful).
Using jQuery:
//Get height
var divHeight = $('#div').height();
//Apply css rule
$('#anotherDiv').css('height', divHeight);
Quite late answer, however it might be useful for others. You can simply use 100vh (vh is viewport-height unit)
In your code footer has position:absolute but the actual position (eg. bottom: 30px;) is not given. Also, if you want the .content or .push to affect the .footer position, they would have to be in the same flow (eg. both position:static;). Giving footer position:absolute by definition takes the footer positioning from the normal flow, so this is incompatible with the objective.
I assume what you're trying to do is get a page that is 100% even with little content, and a footer that's always on the bottom of the page/screen.
FooterStickAlt is a good cross-browser solution to achieve that. http://www.themaninblue.com/experiment/footerStickAlt/
Found my own solution based on a lead that Cen wrote; searched 100% Layout with Faux Columns and got this http://www.savio.no/examples/three-column-layout-6.asp
With a little tweaking and splicing up my layout different I came up with the following solution which works across all browsers.
加载中,请稍侯......
精彩评论