html - 如何使 HTML 页脚占据页面的剩余高度而不对其进行修复或使用 JS？

Question

例如，我希望此页面的页脚填充到页面底部，但我希望此页面的行为与现在一样 - 因此无法修复页脚。我宁愿不使用 JS，因为$(window).resize()它很昂贵而且性能是我们关心的问题。

我们支持的最低浏览器是 IE9、Firefox 13、Chrome 16 和 Safari 5，所以我不担心使用更高级的解决方案，尽管可能不是最先进的。

Answer 1

您不能 - 您必须计算窗口高度和页脚顶部偏移量（涉及 JS），或者将元素的位置固定为bottom: 0.

Answer 2

您可以使页面背景颜色与页脚颜色匹配，而不是将图形用作整个页面的背景，而仅用于内容区域。

所以把背景放在 main-content-container

并制作身体背景颜色#EBEBEB

Answer 3

这是一种方法，但它确实带来了其他问题。您需要设置一个最小高度并确保您的内容不超过该最小高度，否则它可能会被截断，并且所有文本都必须位于第二个 div 的顶部。

的CSS：

body,html
{
 width: 100%;
 height: 100%;
}
div#wrapper
{
 overflow: hidden;
 height: 100%;
 min-height: 600px;
}
div#one
{
 background-color: #0ff;
 height: 200px;
}
div#two
{
 height: 100%;
 background-color: #f00;
}

的HTML：

<div id="wrapper">
    <div id="one"></div>
    <div id="two"></div>
</div>

所以在这个例子中，底部的内容高度不能超过 400px。但是，如果它比那个大，它将被纯色填充。