100% height <div> inside a fullpage div (top:0, bottom:0)_问答_开发者

100% height <div> inside a fullpage div (top:0, bottom:0)

开发者 https://www.devze.com 2023-03-24 07:04 出处：网络

Problem is simple. I want a full height div (#inner) inside another full height div (#outer, but with paddings).

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%.