Код
демонстрация

Основная форма HTML выглядит следующим образом:

<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 HTML, я пытаюсь сделать элемент#main Заполните всю высоту окна просмотра браузера, используя JavaScript / jQuery следующим образом:

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

});

Как ясно объяснено в комментариях к приведенному выше коду, код автоматически вычисляет необходимые отступы для#main так что его высота равна высоте окна просмотра браузера.

Это работает хорошо, за исключением того, что вычисленный отступ (и, следовательно, результирующая высота) неверен в одном случае, который мне удалось идентифицировать.

Легко воспроизводимыйпо крайней мере наWindows 7, браузер Google Chrome (последнее), когда вы изменяете размер окна браузера до 567x724 px, что подразумевает размер области просмотра 551x611 px (вы можете использовать расширение какОкно Resizer), вы заметите, что вычисляемый отступ элемента приводит к тому, что его высота превышает высоту области просмотра браузера.

Почему это происходит? Я не мог воспроизвести то же самое в любом другом разрешении. Что я мог здесь упустить?