javascript - Making an element fill the entire height of browser viewport using jQuery

Question

Code
Demo

The basic form of HTML looks like this:

<div class="home">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <!-- blah, blah, blah! -->

        </main>
    </div>
</div>

W.r.t the HTML, I am trying to make the element #main fill the entire height of the browser viewport using JavaScript/jQuery like so:

jQuery(document).ready(function($){

    // get height of browser viewport
    var window_h = $(window).height();

    // get height of the jumbotron, i.e. element #main
    var jumbotron_h = $('.home #main').outerHeight(true);

    // calculate necessary padding (top/bottom) to apply on #main so that the
    // element's height is equal to that of the browser's viewport,
    // and its contents are centered vertically
    if (window_h > (jumbotron_h + 60)) {
        var jumbotron_padding = (window_h - jumbotron_h)/2
    } else {
        var jumbotron_padding = 30
    }

    // apply calculated padding on the element dynamically
    $('.home #main').attr('style', 'padding-top:'+jumbotron_padding+'px;padding-bottom:'+jumbotron_padding+'px;');

});

As clearly explained in the comments in the code above, the code automatically calculates the necessary padding to be applied on #main so that its height is equal to that of the browser's viewport.

It works well, except, the calculated padding (and therefore the resultant height) is wrong in one case that I was able to identify.

Easily reproducible at least on Windows 7, Google Chrome browser (latest) when you resize the browser window to 567x724 px, which implies 551x611 px viewport size, (you can use an extension like Window Resizer), you'll notice that the element's calculated padding results in its height being larger than that of the browser's viewport.

Why is this happening? I wasn't able to reproduce the same at any other resolution. What could I possibly be missing here?

Answer 1

First off, Jquery's .outerheight() function includes padding, which means that when you measure the height of your #Main element after this function runs the first time, it will equal the window.height. In other words - it will look awful when you resize your browser. You can see this in action on this fiddle when you resize the browser window the old-fashioned way. You can use margins instead, but then you'll have to adjust your CSS quite a bit. Even then, resizing the window still looks awful and buggy and has inconsistent results across browsers. You can see that on this fiddle.

The specific bug you're referring to is probably due to inconsistent math when you resize your window - a combination of your use of padding (which is included in .outerheight() as mentioned above) and the viewport size not being easily divisible by 2 (it's impossible to have half a pixel and different browsers will render that half a pixel differently).

I should also point out this line of code:

if (window_h > (jumbotron_h + 60)) {
    var jumbotron_padding = (window_h - jumbotron_h)/2
} else {
    var jumbotron_padding = 30
}

This forces your page to always be #main.height() + 60, which can be bigger than your viewable window, depending upon your window size. #main.height() comes out to around 200.5px (there we are with another half pixel).

Assuming that your goal is to vertically center the #Main element, your best bet is to use one of the many straight CSS methods available. The table method seems most applicable here because it is completely dynamic (and thus can be responsive) - simply create a single cell CSS table, use CSS valign, and build your entire page inside that cell. For older versions of IE you'll need to use a tiny hack (display:Inline-block;) to make it work.

HTML:

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS:

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

IE fix:

#child {
    display: inline-block;
}