腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >当内容较少时，如何将页脚放在Viewport下面？

问当内容较少时，如何将页脚放在Viewport下面？
EN

Stack Overflow用户

提问于 2014-06-10 14:48:43

回答 1查看 647关注 0票数 1

我在一个网站上工作，有时页面可能不会覆盖整个屏幕的高度(因为内容较少)，这会在页脚下面创建空的空白。我试图通过始终将页脚保持在视口以下来解决这个问题。我尝试过很多方法来解决这个问题，但是它们都解决了一个问题，创造了另一个问题。

这是一个关于我到目前为止所拥有的jSFiddle。

只有当我将height:100%设置为body和html时，它才真正起作用，但这使得DOM中的内容溢出，这是我试图避免的。另外，因为站点需要一个装箱的布局，所以我需要用代码中使用的#page-包装div包装页面内容和页脚。

请让我知道，如果有办法实现这一点，与给定的标记。

谢谢!

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

html

css

sticky-footer

回答 1

Stack Overflow用户

发布于 2014-06-10 20:40:48

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

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

但是，除非您使用

* { box-sizing: border-box; }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24144028

复制

相似问题

问当内容较少时，如何将页脚放在Viewport下面？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当内容较少时，如何将页脚放在Viewport下面？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当内容较少时，如何将页脚放在Viewport下面？
EN