標題+粘滯頁腳+內容div覆蓋其餘內容，如何集中內容？

Question

我正在使用此代碼。 http://jsbin.com/ibecak/1/。我從這裏拿到它：http://peterned.home.xs4all.nl/examples/csslayout1.html。這很好。

但是，我想要在容器div（黃色）中的頁眉和頁腳之間的空間中心內容div（洋紅色）。

我會怎麼做，而不會破壞任何東西？我試過設置顯示器：table-cell和vertical-align：middle在#content上，但無濟於事。

對我來說重要的是，當窗口太小而不是重疊所有內容時，頁腳被壓下，但我仍然希望能夠將#content居中放在#container的剩餘空間中。

如果可能的話，我想知道如何用CSS做到這一點。

謝謝。

Answer 1

這不是一件容易的事情。由於高度值在瀏覽器中有點有趣，如果它是寬度，那麼就沒有問題了。

您將需要使用不止3個div。

您將需要將您的內容div放入另一個div中，並使用jquery來計算頁眉和頁腳之間的空間高度。如果頁眉和頁腳是固定的高度，它會使得工作更容易。

一旦你計算出你的身高，那麼你將需要絕對地將你的div放在容器div中，以便它位於空間的中間。

Answer 2

問題 - 我想在容器div（黃色）的頁眉和頁腳之間的空間中居中放置div（洋紅色）。

嘗試垂直居中內容div的困難不知道高度。如果它是一個固定的高度，那麼你可以做到這一點。

例

div#content{ 
    height: 300px; 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; 
    // Negative margin is half the height of content div 
    // To ensure it is in the middle 
} 

你可以計算出使用jQuery的高度，然後設置CSS樣式。