自動調整div高度以填充空間 - CSS

Question

我有頂部標題<div id="header"></div>，中間部分<div id="content"></div>和底部頁腳<div id="footer"></div>。

頁眉和頁腳的高度固定爲50px。我想修復頁眉和頁腳在頂部和底部的位置，我想拉伸中間部分（內容）以填充剩餘空間。

我該怎麼做？

Answer 1

我通過定義如下的樣式來製作它;

#header, #content, #footer { 
    position: absolute; 
} 
#header{ 
    top: 0; 
    width: 100%; 
    height: 50px; 
    left: 0; 
    right: 0; 
} 
#content { 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 50px; 
} 
#footer { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 50px; 
} 

你可以看到我的小提琴here

感謝@ rocky3000和@Mika支持:)

Answer 2

您可以使用位置：頁腳和頁眉的絕對位置，然後將頁腳放置在底部：0px。我會做這種方式：

#header { 
    height: 50px; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    z-index: 2; 
} 

#footer { 
    height: 50px; 
    width: 100%; 
    position: fixed; 
    bottom: 0px; 
    z-index: 2; 
} 

#content { 
    top: 50px; 
    width: 100%; 
    position: absolute; 
    z-index: 1; 
} 

Answer 3

搜索粘頁腳LINK這裏計算器或與谷歌和問題走了。