当内容较少时,如何将页脚放在视口下方?

时间:2014-06-10 14:48:44

标签: html css sticky-footer

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

到目前为止,这是jSFiddle

它实际工作的唯一时间是我将height:100%设置为正文和html,但这会使内容溢出DOM中的正文,我正在努力避免。此外,因为站点需要一个盒装布局,我需要使用代码中使用的#page-wrapper div包装页面内容和页脚。

如果有办法实现这一点,请通过给定的标记告诉我。

谢谢!

修改:这是稍微更新的jSFiddle

1 个答案:

答案 0 :(得分:0)

我认为你可以通过绝对定位页脚并使页面包装器相对定位来实现这一点。问题在于,您必须根据HTML元素的高度使用JS调整页面包装的大小。类似的东西:

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

但除非你使用

,否则你可能需要调整一下位置
* { box-sizing: border-box; }