Question

我刚才问了一个问题，但我措辞得很厉害，最后让所有人感到困惑，让我重试一下;

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

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

Child 1，高297px，100％父div的宽度。

Child 2是内容div。它是父母身高的100％。

页脚高200px，父div的宽度为100％。

我的问题 - 将child 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;
 }

谢谢！

Answer 1

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

Div自动填充页脚/缺少内容

1 个答案: