使用jQuery使元素填充浏览器视口的整个高度 [英] Making an element fill the entire height of browser viewport using jQuery

问题描述

代码
演示

Code
Demo

HTML的基本形式如下:

The basic form of HTML looks like this:

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

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

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

没有HTML，我正在尝试使用JavaScript/jQuery使元素#main填充浏览器视口的整个高度，如下所示:

W.r.t the HTML, I am trying to make the element #main fill the entire height of the browser viewport using JavaScript/jQuery like so:

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

As clearly explained in the comments in the code above, the code automatically calculates the necessary padding to be applied on #main so that its height is equal to that of the browser's viewport.

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

It works well, except, the calculated padding (and therefore the resultant height) is wrong in one case that I was able to identify.

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

Easily reproducible at least on Windows 7, Google Chrome browser (latest) when you resize the browser window to 567x724 px, which implies 551x611 px viewport size, (you can use an extension like Window Resizer), you'll notice that the element's calculated padding results in its height being larger than that of the browser's viewport.

为什么会这样?我无法以其他任何分辨率重现相同的图像.我可能在这里想念什么?

Why is this happening? I wasn't able to reproduce the same at any other resolution. What could I possibly be missing here?

推荐答案

首先，Jquery的.outerheight()函数包括填充，这意味着当您测量#Main元素的高度后，此函数第一次运行时，它将等于window.height.换句话说，当您调整浏览器大小时，它看起来会很糟糕.当您调整浏览器窗口的大小时，您可以在此小提琴上看到此操作老式的方式.您可以改用边距，但随后必须对CSS进行大量调整.即使这样，调整窗口的大小仍然看起来很糟糕，而且在各个浏览器中都产生不一致的结果.您可以在此小提琴上看到它.

First off, Jquery's .outerheight() function includes padding, which means that when you measure the height of your #Main element after this function runs the first time, it will equal the window.height. In other words - it will look awful when you resize your browser. You can see this in action on this fiddle when you resize the browser window the old-fashioned way. You can use margins instead, but then you'll have to adjust your CSS quite a bit. Even then, resizing the window still looks awful and buggy and has inconsistent results across browsers. You can see that on this fiddle.

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

The specific bug you're referring to is probably due to inconsistent math when you resize your window - a combination of your use of padding (which is included in .outerheight() as mentioned above) and the viewport size not being easily divisible by 2 (it's impossible to have half a pixel and different browsers will render that half a pixel differently).

我还应该指出这一行代码:

I should also point out this line of code:

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.5像素(我们还有另一个半像素).

This forces your page to always be #main.height() + 60, which can be bigger than your viewable window, depending upon your window size. #main.height() comes out to around 200.5px (there we are with another half pixel).

假设您的目标是使#Main元素垂直居中，则最好的选择是使用许多可用的直接CSS方法之一. 表方法在这里似乎最适用，因为它是完全动态的(因此可以响应)-只需创建一个单元格CSS表，使用CSS valign，然后在该单元格内构建整个页面即可.对于较旧版本的IE，您需要使用微型hack(display:Inline-block;)使其正常工作.

Assuming that your goal is to vertically center the #Main element, your best bet is to use one of the many straight CSS methods available. The table method seems most applicable here because it is completely dynamic (and thus can be responsive) - simply create a single cell CSS table, use CSS valign, and build your entire page inside that cell. For older versions of IE you'll need to use a tiny hack (display:Inline-block;) to make it work.

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;
}

这篇关于使用jQuery使元素填充浏览器视口的整个高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！