使用 jQuery 使元素填充浏览器视口的整个高度

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

本文关键字：高度 视口 浏览器 jQuery 元素 填充 使用      更新时间：2023-09-26

Code
演示

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填充浏览器视口的整个高度，如下所示：

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像素时，这意味着551x611像素的视口大小，（您可以使用像Window Reizer这样的扩展），您会注意到元素的计算填充导致其高度大于浏览器视口的高度。

为什么会这样？我无法在任何其他分辨率下重现相同的内容。我在这里可能缺少什么？

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

您所指的特定错误可能是由于调整窗口大小时的数学不一致 - 您使用填充（如上所述包含在.outerheight()中）和视口大小不容易被 2 整除（不可能有半个像素，不同的浏览器会以不同的方式呈现这半个像素）。

我还应该指出这行代码：

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

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

假设您的目标是垂直居中#Main元素，最好的办法是使用许多可用的直接 CSS 方法之一。table 方法在这里似乎最适用，因为它是完全动态的（因此可以响应） - 只需创建一个单元格 CSS 表，使用 CSS valign，然后在该单元格内构建整个页面。对于旧版本的IE，您需要使用一个小的hack（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;
}

根据@Thomas的回答，我确定了两种可能的解决方案。我正在使用#2解决方案，考虑更好的浏览器支持。

1. 使用单位vh（视口高度）。浏览器支持：IE9及以上版本。

.CSS： 

.home #primary { /* Parent */
    display: table;
    width: 100%;
}
.home #main { /* Child */
    display: table-cell;
    height: 100vh; /* 100% viewport height */
    vertical-align: middle;
}

2. 动态设置父（.home #primary）的高度等于浏览器视口的高度。

.JS：

jQuery(document).ready(function($){
    var window_h = $(window).height();
    var jumbotron_h = $('.home #main').height();
    if (window_h <= (jumbotron_h + 60)) {
        var window_h = jumbotron_h + 60
    }
    $('.home #primary').attr('style', 'height:'+window_h+'px;');
});

.CSS：

.home #primary { /* Parent */
    display: table;
    width: 100%;
}
.home #main { /* Child */
    display: table-cell;
    height: 100%; /* 100% height of parent */
    vertical-align: middle;
}

       body {
        height:100vh;
       }
       .element-to-be-centered { 
        font-size:1em; 
        text-align:center; 
        top: 49%;
        -webkit-transform: translateY(-49%);
        -ms-transform: translateY(-49%);
        transform: translateY(-49%);
       }

我最近一直在做很多居中内容的实验。此技术无需在任何元素上设置高度即可工作。

这将在 ie9 及更高版本中工作。

在你的 CSS 中

html, body {
    height: 100%;
}
div, #main {
    height: 100%;
}
相关文章：