我有一个带有页眉、内容和页脚的网页。
内容中有背景图片。我希望图像填充页眉和页脚之间的剩余空间。有些 div 是内容 div 的子级，图像有时有内容，有时没有。
HTML:
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style = "text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
CSS:
* {
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width:40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width:40%;
}
#footer {
width:100%;
}
我试过 height: 100% 但我怀疑没有内容会失败。事实上，我认为这就是为什么一切都失败的原因，除非我对高度进行硬编码。但由于显而易见的原因，这不是一个好的解决方案。
有人知道如何使这项工作成功吗？
编辑: 我试着改变这个:
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
为此:
#contentParent {
flex: 1;
background-image: url(../Graphics/background.jpg);
}
但是它将 div 缩小到子 div 的大小，使事情变得更糟..
最佳答案
这是一个解决方案，它将页眉、页脚和 #contentParent 定义为 position: fixed 并给 #contentParent 100% 高度减去高度页眉和页脚(在此示例中为 80 像素 - 这取决于您自己的设置)。
必须在 #contentParent 中添加任何额外的内容 - 然后该元素将滚动，因为它具有 overflow-y:auto;。由于页眉和页脚的绝对位置，页眉和页脚将始终保留在屏幕上，并且不会覆盖内容的任何部分，因为 #contentParent 在顶部和底部有相应的边距，等于页眉的高度和页脚。
背景图像将覆盖 #contentParent 完全不会滚动到 background-attachment: fixed(集成在快捷方式 背景属性)
html,
body,
#main {
height: 100%;
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 40px;
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
position: fixed;
height: calc(100% - 80px);
width: 100%;
overflow-Y: auto;
margin: 40px 0;
background: url(http://placehold.it/1500x800/fc7) center center no-repeat;
background-position: fixed;
background-size: cover;
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width: 40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width: 40%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
width: 100%;
background: lightblue;
}<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style="text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>关于html - 如何让div填充剩余空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43565312/