我怎么知道我的内容是否垂直占据了整个页面？
[英]How do I know if my content takes up the whole page vertically?
问题描述
I have a site that I've been working on the the past couple of weeks. 
我有一个网站，我在过去几周一直在工作。 I have a very nice footer on it, problem is, it doesn't stay at the bottom. 我有一个非常好的页脚，问题是，它不会停留在底部。 I've come up with a simple solution. 我想出了一个简单的解决方案。
If the page isn't completely filled (ie the content only goes half way down), absolute position the footer to the bottom. 如果页面未完全填充（即内容仅向下移动一半），则将页脚绝对定位到底部。
If the page is overflowing (vertically), leave the footer as just another element. 如果页面溢出（垂直），请将页脚保留为另一个元素。
Problem is, I don't know how to check if my content is overfilled. 问题是，我不知道如何检查我的内容是否过满。 Is there a way to check if the document fills up all the space vertically? 有没有办法检查文件是否垂直填满所有空间？ The only thing I can think of is to check to see if the vertical scroll-bar is enabled, however, I don't know how to check for that either. 我唯一能想到的是检查是否启用了垂直滚动条，但是，我不知道如何检查它。
I'm using jQuery, answers with it are fine. 我正在使用jQuery，答案很好。 Thanks! 谢谢！
EDIT 编辑
OK, my question was apparently misunderstood. 好吧，我的问题显然被误解了。 Sorry guys, I don't need solutions on how to keep my footer at the bottom. 对不起，伙计，我不需要解决方法如何保持我的页脚在底部。 I need ways of determining if data overflows on the y-axis. 我需要确定数据是否在y轴上溢出的方法。 I happened to mention my reason why I needed to know this. 我碰巧提到了为什么我需要知道这一点。 Don't make me regret this guys :p 不要让我后悔这些家伙：p
5 个解决方案
解决方案1
3 2011-10-04 21:39:27
I've used this successfully many times over: http://cssstickyfooter.com . 我成功地多次使用过这个： http ： //cssstickyfooter.com 。 No JavaScript needed at all. 根本不需要JavaScript。
解决方案2
2 已采纳 2011-10-04 21:44:26
Using jQuery, $(window).height() is how you get the height of the viewport. 使用jQuery， $(window).height()是获取视口高度的方法。 You can check this value against your content's height: 您可以根据内容的高度检查此值：
if($("#content").height() > $(window).height()) {
// absolute position my footer
}
解决方案3
1 2011-10-04 21:44:01
Use the Sticky Footer technique like Matt posted. 使用Matt发布的Sticky Footer技术。
The basic idea of it is that you set a static height for your footer. 它的基本思想是为页脚设置静态高度。 Make your webpage take up the full height of the browser. 使您的网页占据浏览器的全部高度。 Push the footer off the screen from the #content div, and then move the footer back onto the page with a negative margin value. 将页脚从#content div推离屏幕，然后将页脚移回页面，并带有负边距值。
解决方案4
1 2011-10-04 21:44:15
没有看到你的HTML就很难回答，但如果你使用的是jquery，只需使用outerHeight来获取页面上元素的垂直大小，并将其与window.height进行比较。
解决方案5
1 2011-10-04 21:49:12
You could apply the css clearfix trick. 你可以应用css clearfix技巧。 As stated it is hard with out seeing your code. 如上所述，很难看到你的代码。 Even still this could work. 即使这仍然可行。
Example: 例：
<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>
This helps to keep content from overflowing and should keep your footer at the bottom or below your content. 这有助于防止内容溢出，并且应将页脚保持在内容的底部或下方。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.