jQuery - 检测元素高度是否大于窗口高度并对此采取措施

Question

标题确实说明了一切。

基本上我想检测这个 div 的 height 是否大于 window height 并对此采取措施。 我已经这样做了，

但无法让它工作http://jsfiddle.net/dhkCa/3为什么它不起作用？

编辑：修复了 css 代码中的一个小错误。 Jsfiddle 链接已更新。

Answer 1

document 包含其自身内的所有元素，其高度是所有这些元素的高度之和（无论如何，所有 display:block 元素，加上边距和填充）;因此，包含的元素不能高于文档本身。您需要做的是比较窗口的高度，而不是文档的高度：

var div = $("div").height();
var win = $(window).height();

if (div > win ) {
    $("div").addClass('red');
}

JS Fiddle 演示。

Answer 2

对于滚动高度与文档滚动高度不同的元素，您可以使用 element.getBoundingClientRect().height （文档）。

Answer 3

我建议使用 .outerHeight()，因为 .height() 不会查看元素的填充。

var div = $("div").outerHeight();
var win = $(window).height();

if (div > win ) {
    $("div").addClass('red');
}