当内容较少时，如何将页脚放在视口下方？答案

【问题标题】：How to put the footer below the Viewport, when there is less content?当内容较少时，如何将页脚放在视口下方？
【发布时间】：2014-07-31 09:29:11
【问题描述】：

我正在开发一个网站，有时页面可能无法覆盖整个屏幕高度（由于内容较少），这会在页脚下方产生空白区域。我试图通过始终将页脚保持在视口下方来解决这个问题。我尝试了很多方法来做到这一点，但它们都解决了一个问题并创造了另一个问题。

这是我目前所拥有的jSFiddle。

它真正起作用的唯一一次是当我将 height:100% 设置为正文和 html 时，但这会使内容在 DOM 中溢出正文，这是我试图避免的。此外，由于该网站需要盒装布局，因此我需要使用代码中使用的#page-wrapper div 来包装页面内容和页脚。

如果有给定标记的方法，请告诉我。

谢谢！

编辑：这里是稍加更新的jSFiddle

【问题讨论】：

【解决方案1】：

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

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

但你可能需要稍微调整一下位置，除非你使用

* { box-sizing: border-box; }

【讨论】：