jquery constraint div to max window height

Question

I am using this code to achieve a div with browser (window) height

$(document).ready(function(){

    $('#div') .css({'height': (($(window).height()))+'px'});

});

But what if I want the div constraint its height to user maximum window height(max to their device limit)? As the above code only determine the current window height, once user resizing window or not opening it with max window size, it got change and failed.

Answer 1

Try this :

$(document).ready(function(){
    $(window).resize(function(){
        $('#div') .css({'height': (($(window).height()))+'px'});
    }).trigger('resize')
});

With that, you are binding an event when the screen resize. It will recalculate the window height.

the .trigger() part is to ensure that it happen once when the DOM is ready (it trigger the event resize).

Answer 2

...div constraint its height to user maximum window height(max to their device limit)

once user resizing window or not opening it with max window size, it got change and failed.

Sounds like you're looking for

screen.height

which would give you the height of the screen, not the window.