整页 div 内的 100% 高度 <div>（顶部：0，底部：0）答案

【问题标题】：100% height <div> inside a fullpage div (top:0, bottom:0)整页 div 内的 100% 高度 <div>（顶部：0，底部：0）
【发布时间】：2011-10-18 03:30:00
【问题描述】：

问题很简单。

我想要一个全高 div (#inner) 在另一个全高 div（#outer，但有填充）内。

此代码在 Firefox 和 IE8 中正确呈现，但在 IE7 和 IE6 中不正确。

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

http://jsfiddle.net/8wVQp/



#外部{
 位置：绝对；
 顶部：0；
 底部：0；
 对：0；
 左：0；
 填充：50px；
 背景颜色：#FEE；
 高度：自动；
}
#内在{
 高度：100%；
 背景颜色：#FDD；
}

标签： html css internet-explorer

【解决方案1】：

这是 IE6 和 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 来识别浏览器并相应地应用 css。

【讨论】：

我认为这不是他想要的。 #outer width 为auto，因此可以在调整浏览器窗口大小时更改。
我知道他想保持高度为'auto'，这里的问题是内部div没有占用外部div的100％空间，原因可以归因于IE6 和 IE7 中的错误 .. 唯一的方法（至少我发现工作正常的方法）是给父 div 一个固定的高度...

【解决方案2】：

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

【讨论】：

父级是并且不是 100% 的高度！

【解决方案3】：

对于#outer，不要使用height:auto。让它height:100%。

【讨论】：

高度：100% 时，paddin 的高度也会添加到
的高度