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

概述谢谢你的期待. 我正在尝试制作一个非常简单的响应式HTML布局： HTML： <div id="header"></div><div id="content"></div><div id="footer"></div> CSS： #header{ width: 100%; height: 50px;}#content{ width: 100%; heigh 谢谢你的期待.

我正在尝试制作一个非常简单的响应式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/

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

我@R_419_7004@错过了什么？谢谢！

解决了！

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;}

谢谢！

解决方法 听起来你需要修复页眉和页脚.

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

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

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

总结

以上是内存溢出为你收集整理的html – 简单的响应式设计 – 如何创建粘性页眉和页脚,然后强制内容div在它们之间展开？全部内容，希望文章能够帮你解决html – 简单的响应式设计 – 如何创建粘性页眉和页脚,然后强制内容div在它们之间展开？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。