使用 jQuery 计算精确的窗口高度

Question

所以我正在重新设计我的网站：http://staging.slackrmedia.com/keenanpayne/，但我遇到了一个小问题。我希望网站的每个“窗格”都是窗口的确切高度，无论大小如何。我还希望其中的内容准确定位在中心。

我现在正在尝试用 jQuery 来完成这个：

function setSectionHeight() { 
    // Set section heights
    windowHeightPadding = $(window).height() / 2;
    firstSectionPadding = ($(window).height() - $('header').height()) / 2;

    // Apply proper styling
    $('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
    $('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}

setSectionHeight();

// Adjust section heights on window resize
$(window).on('resize', function(){
    setSectionHeight();
});

所以这是计算窗口高度并将其除以 2，所以我可以设置每个部分的顶部和底部填充。

但是，对于第一部分，为了获得正确的顶部和底部填充，我需要减去标题的高度，这就是我有一个 firstSectionPadding 变量的原因。

然后，我只需将 CSS 添加到我网站上的每个 section 标记，并为主页 section 标记添加单独的样式。

这很好用，但正如您在访问我的网站时看到的那样，由于某种原因，高度不正确。

现在它看起来像：

它应该看起来像：

我完全不知道这个额外的填充或空间是从哪里来的。我认为我的方程式是正确的，但也许我没有考虑到什么？

Answer 1

这可以通过 CSS 来完成。一个 div 设置为 100% 的高度和宽度，使用 text-align:center;设置为 display:table 和 100% 高度和宽度的第二个 div。最后，将第三个 div 设置为 display:table-cell 和 vertical-align:center;