jQuery - Detect if element height is bigger than window height and do something about it

jquery window height element detect
Joonas picture Joonas · Aug 31, 2011 · Viewed 22.8k times · Source

The tittle really says it all.

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

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

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

Answer

David says reinstate Monica picture David says reinstate Monica · Aug 31, 2011

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 Fiddle demo.

Related questions

How to change height div on window resize?

I have a div on my website that should be the height of the window. This is what i got: $(document).ready(function() { var bodyheight = $(document).height(); $("#sidebar").height(bodyheight); }); However, it does not automatically change when the window is …

Read More
Jquery $(window).height() function does not return actual window height

I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have used this function before and have never …

Read More
$(window).scrollTop() vs. $(document).scrollTop()

What's the difference between: $(window).scrollTop() and $(document).scrollTop() Thanks.

Read More