jQuery - 检测元素高度是否大于窗口高度并对其执行某些操作 [英] jQuery - Detect if element height is bigger than window height and do something about it

问题描述

Tittle真的说了这一切。

The tittle really says it all.

基本上我想检测这个 div 的 height 大于窗口 height 并对此做些什么..

Basically i want to detect if this div's height is bigger than window height and do something about it..

我已经这样做但我无法让它工作 http ：//jsfiddle.net/dhkCa/3 为什么不能正常工作？

I have done this but i cant get it to work http://jsfiddle.net/dhkCa/3 Why wont it work?

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

Fixed a little error in the css code. Jsfiddle link updated.

推荐答案

文档包含所有元素在它自身内部，它的高度是所有这些元素的高度之和（所有 display：block 元素，加上边距和填充）;因此，没有包含的元素可以比文档本身更高。您需要做的是比较窗口的高度，而不是文档的高度：

The document's contains all the elements within itself, and its height is a sum of the heights of all those elements (all the display:block elements anyway, plus margin and padding); therefore no contained element can be taller than the document itself. What you need to do is compare the window's height, not the document's:

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

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

JS小提琴演示。

这篇关于jQuery - 检测元素高度是否大于窗口高度并对其执行某些操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！