自动调整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这里计算器或与谷歌和问题走了。