html - 当内容较少时，如何将页脚放在视口(viewport)下方？

Question

我在一个网站上工作，有时页面可能无法覆盖整个屏幕高度(由于内容较少)，这会在页脚下方创建空白区域。我试图通过始终将页脚保持在视口(viewport)下方来解决这个问题。我已经尝试了很多方法来做到这一点，但所有这些方法都解决了一个问题并创造了另一个问题。

这是一个jSFiddle对于我目前所拥有的。

唯一一次真正起作用的是当我将 height:100% 设置为 body 和 html 时，但这会使内容溢出 DOM 中的 body，我正在努力避免这种情况。此外，因为网站需要盒装布局，所以我需要使用代码中使用的 #page-wrapper div 包装页面内容和页脚。

请让我知道是否有办法使用给定的标记实现这一目标。

谢谢!

编辑:这是一个稍微更新的 jSFiddle

Answer 1

我认为您可以通过绝对定位页脚并使页面包装器相对定位来做到这一点。问题是您必须根据 HTML 元素的高度使用 JS 调整页面包装器的大小。像这样的东西:

$('#page-wrapper').height($('html').height());

但是除非你使用

，否则你可能需要稍微调整位置

* { box-sizing: border-box; }