height of page with jQuery

Question

What is the best way to measure the height of the entire page, and not just a screen. The reason I am asking is because i need to add an overlay div that should cover it entirely. Perhaps i can measure the height and add some more pixels for good measure?

If i do something like this, is it a move in the right direction of is there a better way?

$('#myOverlay').height($('#myPage').height() + 100) ;

http://stackoverflow.com/questions/806402/how-to-get-body-height-using-jquery and http://www.foliotek.com/devblog/finding-real-body-height-using-jquery/ :) — Lasse Espeholt, Apr 20 '11 at 15:18

mekwall · Answer 1 · 2011-04-21T06:47:27.120

CSS/HTML method for overlay

If you want an overlay to cover another element or viewport it's doable by only using CSS/HTML which will be alot faster and also works on browsers where JavaScript is disabled.

CSS example

By using absolute positiion we can tell the browser to fill an entire container with a the overlay element, as long as the container element is relatively positioned:

#myPage {
    position: relative;
}

#myOverlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

#myOverlay.fixed {
    position: fixed;
}

HTML examples

To cover the #myPage element with the overlay (see on jsFiddle):

<div id="myPage">
    <p>This will be covered by the overlay</p>
    <div id="myOverlay"></div>
</div>

To cover the entire body, i.e. viewport, put the overlay element right before the closing tag of body and use fixed positioning (see on jsFiddle):

<body>
    <div id="myPage"></div>
    <div id="myOverlay" class="fixed"></div>
</body>

JavaScript method to get entire document

To get the entire height of the document (even that what is outside of the viewport) you can use James Padolseys solution which is very simple and works across all browsers:

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

score 1 · Accepted Answer · answered Apr 20 '11 at 15:39

1

If you consider using a fixed positioned overlay, instead of absolute, you won't need the screen's height, but it will cover it all the way. try it here : http://jsfiddle.net/c4uzQ/9/

.overlay
{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #909090;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

answered Apr 20 '11 at 15:39

rucsi

516
2
7

Setting width and height is redundant, or is there a specific reason as to why you are doing that? – mekwall Apr 20 '11 at 15:51
Yeah, you are right. It might not necessary at all. To be hones I can't remember what the reason was. Could have been a browser related fix, I'm assuming legacy IE if any, or I could have been too thorough. ;) After all. the more the merrier... – rucsi Apr 20 '11 at 16:22

score 0 · Answer 3 · answered Apr 20 '11 at 15:18

0

You can try using :

$(document).height();

Don't have time to test it now, but check it out.

answered Apr 20 '11 at 15:18

Marc Uberstein

12,501
3
44
72

height of page with jQuery

3 Answers3