我正在寻找解决我的 CSS 问题的方法。这是 Drupal 主题，所以内容会有不同的高度。我已将页脚固定在底部，结构如下
<body>
<div class="page-container">
<div class="header">
</div>
<div class="content-container">
<div class="content-insider">
Different kind of content here
</div>
</div>
</div>
<div class="footer">
</div>
</body>
我需要 content-container 和 content-insider 的高度至少是浏览器窗口的高度，同时也是内部内容的高度。这是需要一直扩展到底部的背景。 我已经尝试了一些解决方案(也来自 stackoverflow )，但它们仅在内容短于浏览器高度时才有效。如果有更多内容，当您向下滚动时，content-insider 会在到达浏览器底部之前中断。
最佳答案
这是粘性页脚的情况。您可以用谷歌搜索或继续阅读。
- 将 .page-container 的最小高度设置为 100%；
- 将其 box-sizing 属性更改为 border-box，以便通过添加一些 padding padding，其高度保持等于 100% vs 100% + padding。然后，完成后，添加一个等于 .footer 高度的填充底部；
- 通过设置一个等于页脚高度的负 margin-top 来拉起页脚。
就是这样。这是一个 fiddle ，您可以看到它的实际效果:http://jsfiddle.net/joplomacedo/MqzGt/
关于css - div height 同时最小浏览器高度和内部内容高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11387548/