javascript - 使用 jQuery 让元素填充浏览器视口(viewport)的整个高度

Question

<强> Code
<强> Demo

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，我试图使用 JavaScript/jQuery 使元素 #main 填充浏览器视口(viewport)的整个高度，如下所示:

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 上应用的必要填充，以便其高度等于浏览器视口(viewport)的高度。

它工作得很好，除了在我能够识别的一种情况下，计算出的填充(以及由此产生的高度)是错误的。

当您将浏览器窗口大小调整为 567x724 像素(这意味着 551x611 像素视口(viewport)大小)时，至少可以在 Windows 7、Google Chrome 浏览器(最新)上轻松重现。可以使用类似 Window Resizer 的扩展名)，您会注意到元素的计算填充导致其高度大于浏览器视口(viewport)的高度。

为什么会发生这种情况？我无法以任何其他分辨率重现相同的结果。我在这里可能会错过什么？

Answer 1

首先，Jquery 的 .outerheight() 函数包含填充，这意味着当您测量 #Main 元素的高度时该函数第一次运行时，它将等于window.height。换句话说 - 当您调整浏览器大小时，它看起来会很糟糕。您可以在 this fiddle 上看到此操作的实际效果。当您以老式方式调整浏览器窗口大小时。您可以使用边距来代替，但是您必须对 CSS 进行相当多的调整。即便如此，调整窗口大小仍然看起来很糟糕并且有很多问题，并且跨浏览器的结果不一致。您可以在this fiddle上看到这一点.

您提到的具体错误可能是由于调整窗口大小时数学不一致造成的 - 填充的使用组合(如上所述，包含在 .outerheight() 中)并且视口(viewport)大小不容易被 2 整除(不可能有半个像素，不同的浏览器将以不同的方式呈现该半个像素)。

我还应该指出这行代码:

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

这会强制您的页面始终为#main.height() + 60，这可能大于您的可 window 口，具体取决于您的窗口大小。 #main.height() 大约为 200.5px(我们还有另外半个像素)。

假设您的目标是使 #Main 元素垂直居中，那么最好的选择是使用众多可用的直接 CSS 方法之一。 The table method在这里似乎最适用，因为它是完全动态的(因此可以响应) - 只需创建一个单元格 CSS 表，使用 CSS valign，并在该单元格内构建整个页面。对于旧版本的 IE，您需要使用一个小技巧 (display:Inline-block;) 才能使其正常工作。

HTML:

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

CSS:

#parent {display: table;}

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

IE修复:

#child {
    display: inline-block;
}