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

Question

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

我现在正在尝试用 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;