用于页脚/缺少内容的 Div 自动填充答案

【问题标题】：Div autofill for footers/lack of content用于页脚/缺少内容的 Div 自动填充
【发布时间】：2012-04-01 22:25:35
【问题描述】：

我前段时间问了一个问题，但我措辞很糟糕，结果把大家搞糊涂了，让我重试；

所以，我有父 div、子 1、子 2 和页脚。

父 div，为页面高度的 100%，宽度为 1024px。

子 1，高 297 像素，父 div 宽度的 100%。

子 2 是内容 div。它是父母身高的 100%。

页脚高 200 像素，宽度为父 div 的 100%。

我的问题 - 将子 2 div 设为父级高度的 100% 会导致空白文档出现溢出问题。它实际上将其高度设置为父级使用的原始页面高度，而不是填充页面上的空白空间。

解决方案？

我只是想让div填满空白，让页脚保持在底部，并且子1 div背景是可见的，没有内容

这是一张图片；

左图是问题，右图是我希望能够实现的目标。

代码：

    <body>

    <div id="wrapper">

        <div id="header">

            <img class="logo" src="images/logo.gif">

            <hr class="logo">

            <div id="navigation">

            </div>

        </div>

        <div id="content">



        </div>

        <div id="footer">

        </div>

    </div>

</body>

还有 CSS：

 * {
margin: 0;
 }

 html, body {
height: 100%;
background-color: #151515;
 }

 hr.logo {
height: 5px;
margin-top: 11px;
margin-bottom: 0px;
background-color: #ea80d0;
border: 0;
 }

 img.logo {
margin-top: 145px;
 }
 #wrapper {
background-color: green;
position: relative;
height: 100%;
margin: 0 auto -20px;
width: 1024px;
 }

 #header {  
height: 297px;
 }

 #navigation {
margin: 0;  
height: 70px;
 }

 #content {
height: 100%;
background-image: url('images/contentbackground.gif');
margin: 0;
 }

 #footer {
bottom: 0px;
background: blue;
height: 200px;
width: 1024px;
 }

谢谢！

【问题讨论】：

仍然很难理解你的问题。如果你想让图 1 看起来像图 2；你需要减掉那些身高：100%的
如果我失去了 100s 的高度，子 div（白色和灰色的那个）怎么知道要填充剩余的空间？
@Konzine：您能否向我们提供代码中使用的两张图片的链接？没有它们，结果看起来与您的示例图像非常不同。
throwbackhero.com/index1.php。忽略仅用于指南的丑陋颜色。

标签： css html height

【解决方案1】：

不确定，但对于子 Div2，不要使用父 div 的宽度。您可以设置 Child Div2 的高度auto。

【讨论】：