Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - dynamic div height equal to the height of the whole window

i am using the code found here jQuery - dynamic div height

<script type='text/javascript'>
$(function(){
    $('#center').css({'height':(($(window).height())-162)+'px'});

    $(window).resize(function(){
    $('#center').css({'height':(($(window).height())-162)+'px'});
    });
});
</script>

now the height change works fine when you resize the window, but if your scroll down the height does not change, this means the window property does not include things beyond the size of the browser window so if you scroll down the height does not increase

so what can i add that will be the size of the whole content not the window size

ANSWER use document instead of window

<script type='text/javascript'>
    $(function(){
        $('#center').css({'height':(($(document).height())-162)+'px'});

        $(window).resize(function(){
        $('#center').css({'height':(($(document).height())-162)+'px'});
        });
    });
</script>
like image 408
vache Avatar asked Oct 18 '09 03:10

vache


People also ask

How can I make my Div occupy full height?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do I set dynamic height in jQuery?

Answer: Use the JavaScript height() method You can set the height of a <div> box dynamically using the jQuery height() method.

How does jQuery calculate window height?

Basically, $(window). height() give you the maximum height inside of the browser window (viewport), and $(document). height() gives you the height of the document inside of the browser.

How can we get dynamic height of div?

We use css property height: calc( 100% - div_height ); Here, Calc is a function. It uses mathematical expression by this property we can set the height content div area dynamically.


2 Answers

You could use:

$("body").height();
like image 152
Technowise Avatar answered Sep 22 '22 21:09

Technowise


Perhaps:

$(document).height()/width()

Is what you need? Since the window contains the document and the window has a fixed width and restricts what you're viewing from the document.

like image 20
meder omuraliev Avatar answered Sep 23 '22 21:09

meder omuraliev