【发布时间】：2013-10-01 21:01:55
【问题描述】：
我正在使用 peter 的出色示例，用于 100% 高度 div 和粘性页脚 (HERE)。我已经省略了页脚部分，因为我没有使用它。
但是，每当我使用子 div 并尝试做同样的事情时，它都不起作用。我希望一个子 div 也能占据其父母身高的 100%。这是 CSS：
<style>
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#content_subdiv{
padding:1em 1em 5em; /* bottom padding for footer */
background:#999;
height:100%;
color:#fff;
}
</style>
这是我的 HTML 代码：
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget massa dolor, rhoncus tempor nunc. Donec tempor odio eget purus vehicula auctor. </p>
</div>
<div id="content">
<p>
Aenean quam mauris, iaculis non aliquet quis, facilisis sed turpis. Cras id erat velit, nec bibendum erat. Vivamus feugiat purus vitae velit dictum in vestibulum ante tristique. Vestibulum ut massa vel justo eleifend consectetur eget ut nisi. Phasellus ut diam nulla. Suspendisse potenti. Praesent blandit gravida facilisis. Donec elementum faucibus gravida. Nullam nec enim velit, ac scelerisque justo. Pellentesque lacus metus, adipiscing nec congue a, volutpat sollicitudin eros. Donec tortor leo, tempor non viverra at, molestie sed dui. Nullam ipsum purus, tempus elementum tincidunt id, iaculis at lectus. Vestibulum viverra mi in mauris ultrices sollicitudin
</p>
<div id="content_subdiv"> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /></div>
</div>
</div>
【问题讨论】：
-
对于那些说“你可以用表格做的所有事情都可以用 CSS 完成”的人，然后解决这个问题。否则，我将在我的 HTML 中使用一个大胖表来进行布局。
-
@capdragon 您希望子 DIV 占据父级高度的 100%？但是同样在父级内部的段落呢？该段落占用了一些垂直空间，因此子 DIV 不能占据父母身高的全部 100%...
-
@Sime 细分应该占用剩余空间
-
@capdragon 现在说得通了 :) 我会调查一下...
-
@capdragon 1. 仅作记录，我驳斥了您的说法，即 CSS
:)2. CSS 3 有一些高级布局机制，因此可能会有 CSS 3解决你的问题。但是，我的 CSS 3 知识仍然很薄弱。