Question

我有一个我正在努力建立的网站，我遇到了一个令我疯狂的小障碍。基本上，在没有足够内容填充视口的页面上，我希望最后一个div（我的页脚）填充视口的其余部分，但它当前正被切断。

我的HTML看起来像这样：

<body>
  <div id="header"> </div>
  <div id="subNav"> </div>
  <div id="content"> </div>
  <div id="footer"> </div>
</body>

我尝试使用html, body, footer { height:100%; }，但这会创建比所需更多的空间，基本上是页脚中全屏长度的空白内容。

如何在不添加滚动条的情况下让我的页脚填充屏幕的其余部分？

提前致谢，一个沮丧的编码器。

Answer 1

我很确定这样做的唯一方法是计算绝对剩余高度。

I.E，使用jQuery

$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );

您可能希望在窗口大小调整上执行此操作以允许动态调整大小窗口。

$(window).resize(function(){...});

Answer 2

我知道这已经晚了10个月，所以你可能已经找到了一些东西。但这是我使用的一种解决方案。

（抱歉，出于某种原因，我无法让代码正常工作以向您显示代码。）基本上将除了页脚之外的所有其他div包装一个名为“容器”的div或类似的东西。页脚div将位于容器div下面，其他所有内容都位于容器内。

将您的身体样式的背景颜色设置为您希望填充位于底部的颜色。然后容器div的背景颜色将是你的身体背景颜色。因此，页脚的所有内容都将是您想要的背景颜色，然后身体背景颜色填充页面的其余部分。

Answer 3

如果您不想使用jQuery路线，那么这个穷人的版本就会给#content一个最小高度，这将使它在大多数显示器中都能正常工作，并且/或者通过给你的页脚添加足够的填充底部。在某些情况下，它可能会触发滚动条，因为您只是控制页面的缩短程度。

（或者你可以接受它作为媒介的限制。例如，如果页面太短，Stack Overflow就会让它的页脚浮动在空白之上。）