Fatal编程技术网
  • css/
  • Css 页脚Div自动填充/缺少内容

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

css html

Css 页脚Div自动填充/缺少内容,css,html,height,Css,Html,Height,不久前我问了一个问题，但我的措辞很糟糕，最后把每个人都弄糊涂了，让我再试一次 所以，我有父div、子1、子2和footer 父div是页面高度的100%，宽度为1024px 子1，高297px，且为父div宽度的100% Child 2是内容分区。它是父母身高的100% 页脚高200px，与父div的宽度为100% 我的问题是使child2div的高度等于父级的100%，这会导致空白文档出现溢出问题。它不是填充页面上的空白，而是将其高度设置为父级使用的原始页面高度 解决方案 我只是想让div填满

不久前我问了一个问题，但我的措辞很糟糕，最后把每个人都弄糊涂了，让我再试一次

所以，我有父div、子1、子2和footer

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

子1，高297px，且为父div宽度的100%

Child 2是内容分区。它是父母身高的100%

页脚高200px，与父div的宽度为100%

我的问题是使child2div的高度等于父级的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>
谢谢

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

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

但仍然很难理解您的问题所在。。如果你想让图1看起来像图2；你需要失去那些高度：100%’如果我失去了100%的高度，那么儿童div（白色和灰色的一个）将如何填补剩余的空间？@Konzine:你能给我们提供代码中使用的两幅图像的链接吗？如果没有它们，结果看起来与示例图像非常不同。。忽略那些难看的颜色，只是作为参考。仍然很难理解你的问题是什么。。如果你想让图1看起来像图2；你需要失去那些高度：100%’如果我失去了100%的高度，那么儿童div（白色和灰色的一个）将如何填补剩余的空间？@Konzine:你能给我们提供代码中使用的两幅图像的链接吗？如果没有它们，结果看起来与示例图像非常不同。。忽略丑陋的颜色，只有在那里的指南。 
 * {
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;
 }