简单的响应式设计 - 如何创建粘性页眉和页脚,然后强制内容div在它们之间展开？

Question

谢谢你的期待.

我正在尝试制作一个非常简单的响应式HTML布局:

HTML:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:

#header{
    width: 100%;
    height: 50px;
}

#content{
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 50px;
}

最终产品应该是一个页面,它有一个50px高的标题锚定在屏幕的顶部,一个50px高的页脚锚定在屏幕的底部.在它们之间,"content"div应该扩展以填充页眉和页脚之间的空间,无论该空间的大小如何.

我已经检查了几个关于"粘性页脚"的教程,不幸的是,它们并不是我所追求的,因为它们没有考虑到"内容"div扩展以填充页眉和页脚之间的空间.

这是我所追求的一个接近的例子,但这个网站是用Flash编写的:

http://www.wearegolden.co.uk/

在看这个时尝试调整屏幕大小.

我在这里错过了什么？谢谢!

解决了!

HTML:

<div id="header">
</div>

<div id="content">
    content
</div>

<div id="footer">
</div>

CSS:

html, body {height: 100%; margin:0px !important;}

#header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

#content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

#footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

谢谢!

Answer 1

听起来你需要修复页眉和页脚.

header{position:fixed; top:0; z-index:10}
footer{position:fixed; bottom:0; z-index:10}

如果大于空间,主体内容将在这些固定元素之间滚动.

注意我认为它的良好实践是以10的倍数进行z-index.这使您可以灵活地将元素插入到堆栈中(如果错过了一个元素).