Question

我有一个顶部标题<div id="header"></div>，一个中间部分<div id="content"></div>和一个底部页脚<div id="footer"></div>。

页眉和页脚的固定高度为50px。我想在顶部和底部修复页眉和页脚的位置，我想拉伸中间部分（内容）以填充剩余空间。

我该怎么做？

Answer 1

您可以在页脚和标题上使用position：absolute，然后将页脚放在底部：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 2

我是通过定义下面的风格来实现的;

#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 3

在stackoverflow或google上搜索粘性页脚LINK，问题就消失了。

自动调整div高度以填充空间 - CSS

3 个答案: