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

HTML的基本形式如下所示：

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

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

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

正如上面代码中的注释所清楚解释的，代码会自动计算要应用于main的必要填充，以便其高度等于浏览器视口的高度

它工作得很好，除了，计算的填充，因此在一个我能够识别的情况下，合成的高度是错误的

易于复制至少在Windows 7上是Google Chrome browser的最新版本当您将浏览器窗口调整为567x724 px，这意味着551x611 px视口大小时，您可以使用扩展，例如，您会注意到元素的计算填充导致其高度大于浏览器视口的高度

为什么会这样？我无法在任何其他分辨率下复制相同的结果。这里可能缺少什么？

首先，Jquery的.outerheight函数包含填充，这意味着在第一次运行此函数后测量主元素的高度时，它将等于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左右，这是另一个半像素

假设您的目标是将主元素垂直居中，那么最好的选择是使用许多可用的直接CSS方法之一。在这里似乎最适用，因为它是完全动态的，因此可以响应-只需创建一个单单元格CSS表，使用CSS valign，并在该单元格中构建整个页面。对于旧版本的IE，你需要使用一个小的hack显示：Inline block；让它工作

HTML:

IE修复程序：

#child {
    display: inline-block;
}

在CSS中

html, body {
    height: 100%;
}

div, #main {
    height: 100%;
}

---

根据@Thomas的回答，我确定了两种可能的解决方案。考虑到更好的浏览器支持，我选择2解决方案

一,。使用单位vh视口高度：IE9及以上

CSS:

二,。动态设置父.home主视图的高度等于浏览器视口的高度

JS:

我最近一直在做很多以内容为中心的实验。这种技术不需要在任何元素上设置高度就可以工作

---

这将在ie9及以上版本中起作用。

当您可以使用纯css时，为什么要使用jQuery？因此，看看您的代码，您似乎主要是试图保持主元素垂直居中。使用CSS有更简单的方法来实现这一点。还是我遗漏了什么？@KarimAG我试过了。1绝对定位导致主要元素崩溃，从而破坏其内容的格式。2即使在绝对定位主站之后，垂直居中也是一件痛苦的事情，从上到下都有%的距离，需要一两次调整。3主站上没有设置高度+网页是响应性设计的，这只会让事情变得更加复杂harder@its_me你能给它添加更多的元素吗？似乎没有附加调整大小事件？无法复制问题，无需调整大小或滚动。感谢这个页面有几个建议，都使用CSS，其中有几个是响应性的。过去我自己用过几次，很高兴知道我不是唯一一个想出这些解决方案的人。根据您的回答，我确定了两种可能的解决方案：。非常感谢您抽出时间！

#parent {display: table;}

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

#child {
    display: inline-block;
}

html, body {
    height: 100%;
}

div, #main {
    height: 100%;
}

.home #primary { /* Parent */
    display: table;
    width: 100%;
}

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

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

});

.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%);
       }