Code
Demo

Die Grundform von HTML sieht folgendermaßen aus:

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

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

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

Im HTML versuche ich das Element zu machen#main Füllen Sie die gesamte Höhe des Browser-Ansichtsfensters mit JavaScript / jQuery wie folgt aus:

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

});

Wie in den Kommentaren im obigen Code klar erläutert, berechnet der Code automatisch die erforderliche Polsterung, auf die angewendet werden soll#main so dass seine Höhe der des Browser-Ansichtsfensters entspricht.

Es funktioniert gut, außer dass die berechnete Polsterung (und damit die resultierende Höhe) in einem von mir identifizierten Fall falsch ist.

Leicht reproduzierbarmindestens aufWindows 7, Google Chrome-Browser (spätestens) Wenn Sie die Größe des Browserfensters auf 567 x 724 Pixel ändern, was eine Größe des Ansichtsfensters von 551 x 611 Pixel impliziert, können Sie eine Erweiterung wie "" verwendenWindow Resizer), werden Sie feststellen, dass der berechnete Abstand des Elements dazu führt, dass seine Höhe größer ist als die des Browser-Ansichtsfensters.

Warum passiert dies? Bei keiner anderen Auflösung konnte ich dasselbe reproduzieren. Was könnte ich hier möglicherweise vermissen?