Question

我有一个我过去几周一直在工作的网站。我有一个非常好的页脚，问题是，它不会停留在底部。我想出了一个简单的解决方案。

如果页面未完全填充（即内容只有一半），则将页脚绝对定位到底部。

如果页面溢出（垂直），请将页脚保留为另一个元素。

问题是，我不知道如何检查我的内容是否过满。有没有办法检查文件是否垂直填满所有空间？我唯一能想到的是检查是否启用了垂直滚动条，但是，我不知道如何检查它。

我正在使用jQuery，答案很好。谢谢！

修改

好吧，我的问题显然被误解了。对不起，伙计，我不需要解决方法如何保持我的页脚在底部。我需要确定数据是否在y轴上溢出的方法。我碰巧提到了为什么我需要知道这一点。不要让我后悔这些家伙：p

Answer 1

我已成功多次使用此功能：http://cssstickyfooter.com。根本不需要JavaScript。

Answer 2

使用jQuery，$(window).height()是获得视口高度的方式。您可以根据内容的高度检查此值：

if($("#content").height() > $(window).height()) {
    // absolute position my footer
}

Answer 3

使用像Matt发布的Sticky Footer技术。

它的基本思想是为页脚设置静态高度。使您的网页占据浏览器的全部高度。将页脚从#content div推离屏幕，然后将页脚移回页面，并显示负边距值。

Answer 4

如果没有看到HTML，很难回答，但是如果你使用的是jquery，只需使用outerHeight来获取页面上元素的垂直大小，并将其与window.height进行比较

Answer 5

您可以应用css clearfix技巧。如上所述，很难看到你的代码。即使这仍然可行。

示例：

<html>
  <style>
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
     }
  </style>

<body>

  <div id="content" class="clearfix">
  </div>

  <div id="footer">
  </div>

</body>
</html>

这有助于防止内容溢出，并且应将页脚保持在内容的底部或下方。

我怎么知道我的内容是否垂直占据了整个页面？

5 个答案: