使用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來完成。一格設置爲100％的高度和寬度，文本對齊：中心;集合中的第二個div顯示：表格和100％高度和寬度。最後，設置第三個div來顯示：table-cell和vertical-align：center;