Código
Manifestación

La forma básica de HTML se ve así:

<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 el HTML, estoy tratando de hacer el elemento#main llene toda la altura de la ventana gráfica del navegador usando JavaScript / jQuery así:

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;');

});

Como se explica claramente en los comentarios en el código anterior, el código calcula automáticamente el relleno necesario para aplicarse en#main para que su altura sea igual a la de la ventana gráfica del navegador.

Funciona bien, excepto que el relleno calculado (y, por lo tanto, la altura resultante) es incorrecto en un caso que pude identificar.

Fácilmente reproducibleal menos enWindows 7, navegador Google Chrome (más reciente) cuando cambia el tamaño de la ventana del navegador a 567x724 px, lo que implica un tamaño de ventana de 551x611 px, (puede usar una extensión comoRedimensionador de ventana), notará que el relleno calculado del elemento hace que su altura sea mayor que la de la ventana gráfica del navegador.

¿Por qué está pasando esto? No pude reproducir lo mismo en ninguna otra resolución. ¿Qué podría estar perdiendo aquí?