我如何知道我的内容是否垂直占据了整个页面？答案

【问题标题】：How do I know if my content takes up the whole page vertically?我如何知道我的内容是否垂直占据了整个页面？
【发布时间】：2011-12-01 01:05:52
【问题描述】：

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

如果页面未完全填满（即内容仅向下一半），则将页脚绝对定位到底部。

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

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

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

编辑

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

【问题讨论】：

stackoverflow.com/questions/4814398/…

标签： javascript jquery html css

【解决方案1】：

您可以应用 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>

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

它的基本思想是为页脚设置一个静态高度。让您的网页占据浏览器的整个高度。将页脚从#content div 推离屏幕，然后将页脚移回到页边距为负值的页面上。

【讨论】：

问题是，就像我告诉马特一样，我的页脚不能是静态高度。
您可以使用相同的技术。只需使用 jQuery 提供 CSS 值。使用$('#footer').height();

【解决方案5】：

我已经成功使用过很多次了：http://cssstickyfooter.com。根本不需要 JavaScript。

【讨论】：

问题是，我的页脚将根据一些不同的事物而变化高度。我宁愿让它动态完成。