Question

问题很简单。

我想要一个完整高度div（#inner）在另一个完整高度div（#outer，但带有填充）中。

此代码在firefox和IE8中正确呈现，但在IE7和IE6中没有。

编辑：在我使用此结构的上下文中，我强制设置postition：absoulte for #outer。

<!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="outer">
 <div id="inner"></div>
</div>

</body></html>

Answer 1

这是IE6和IE中的一个错误。 IE7 ..您需要设置具有固定高度的外部div，以使内部div正常运行。

将您的CSS更改为此类

<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;
}

事情会开始奏效..你可以使用javascript识别浏览器＆amp;相应地应用css。

Answer 2

如果父级已经是全高，则应使用height: 100%而不是position。

Answer 3

表示#outer不使用height:auto。设为height:100%。

整页div内的100％高度<div>（顶部：0，底部：0）</div>

3 个答案: