假设我在网站上有三个框 (div)(见下图):
- 带标志的标题
- 包含一些文字内容
- 带有联系信息的页脚
每个盒子都有独特的颜色(按顺序:黄色、橙色和蓝色)和黑色边框。 我希望网站始终填满整个屏幕， Logo 在顶部，页脚在底部。因此，如果内容中没有足够的文本，则应扩展内容，使页脚位于底部。如果内容中有很多文本，则 slider 应出现在右侧。
如何在 CSS 中做到这一点？重要的是盒子有背景。我找到了很多解决方案，但没有一个不能与背景一起正常工作。
最佳答案
解决方案说明
- 图表中的黑框最小高度为 100%，是滚动容器，并且是相对位置的，以允许子位置与其相对应。
- 图表中的红色框实际上由 2 个框组成:
- 一个用于动态调整大小的内容；这有足够的顶部和底部填充来为您的页眉和页脚腾出空间，并强制滚动容器展开
- 一个用于背景；这是绝对位置，顶部和底部位置是相对于黑框及其父项指定的。
- 图表中的黄色和蓝色框可以分别是
position: absolute、top: 0和bottom: 0...或者您选择如何放置它们。
这是一个 fiddle :http://jsfiddle.net/syndicatedshannon/F5c6T/
和here是另一个带有显式视口(viewport)元素的版本，只是为了澄清、匹配颜色和添加边框以复制 OP 图形(尽管根据 OP，黑色边框实际上是窗口)。
示例 HTML
<html>
<body>
<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
</body>
</html>
示例 CSS
html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }
另请注意，这假定您还不能依赖 CSS3。
关于html - 网站应始终填满整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20664409/