100% height <div> inside a fullpage div (top:0, bottom:0)
Problem is simple.
I want a full height div (#inner) inside another full height div (#outer, but with paddings).
This code is rendered correctly in firefox and IE8 but not in IE7 and IE6.
Edit: In the context I use this structure, I forced to set postition:absoulte for #outer.
http://jsfiddle.net/8wVQp/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<style>
#outer {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
padding: 50px;
background-color: #FEE;
height:auto;
}
#inner {
height:100%;
background-color: #FDD;
}
</style>
<div id="&开发者_运维技巧#111;uter">
<div id="inner"></div>
</div>
</body></html>this is a bug in IE6 & IE7.. you need to set the outer div with fixed height for the inner div to behave properly.
change your CSS to something like this
<style>
#outer {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
padding: 50px;
background-color: #FEE;
height:140px; /* notice the height is in pixels not % */
}
#inner {
height:100%;
background-color: #FDD;
}
things would start to work.. you can use javascript to identify the browser & apply the css accordingly.
if the parent is already full height, you should use height: 100% and not position.
for the #outer don't use height:auto. Make it height:100%.
加载中,请稍侯......
精彩评论