使用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;设置为显示的第二个div：表格和100％高度和宽度。最后，第三个div设置为：table-cell和vertical-align：center;