內容div水平居中且高度爲100％的粘性頁腳情況

Question

我正在嘗試將粘性頁腳和/或頁眉添加到每個頁面上的內容波動的網站上，某些頁面只包含一段或更少的文本，有多個段落。

我希望白色背景div填充頁眉和頁腳之間的頁面的100％，以便無論頁面中有多少內容或查看者的分辨率有多大，白色div將100％垂直（減去頁眉和頁腳）

我一直在擺弄這方面的代碼：

#middle-cell { 
    vertical-align:top; 
    height: 100% 
} 

這裏是我到目前爲止my fiddle。

但到目前爲止，我還沒有能夠得到它的工作。

Answer 1

CodePen

CSS有沒有直接的方法來自動補剩餘高度的容器中（不包括某些未完全支持Flexbox的功能）。

如果您有一個固定高度的標題，則內容的基於百分比的高度將永遠不會正常工作，因爲固定高度在每個尺寸下都是不同的視口百分比。

的解決方案是增加一個新的position: absolute的div 包裝頁面內容，它就像一個新的「視口」，當你連接的所有四邊你需要。

如果你的標題是height: 60px，那麼你可以將你的新包裝的邊緣是這樣的：

• top: 60px - 附加你的頭
• bottom: 0; left: 0; right: 0下面的頂邊 - 附加左/右/底部邊緣 的div到身體的邊緣。

什麼是好的是，瀏覽器不知道如何計算這個div的高度，所以如果你有div.content它設置爲height: 100%內的100％是指剩餘的屏幕空間的高度後，頭。

如果div.content有太多的文本/媒體，並且比包裝更長，只需在包裝div上使用overflow-y: scroll，它可以讓您滾動內容。