好底，所以我试图找出如何得到这个工作了：页脚始终与固定头/高
<div id="wrapper">
<div id="header"></div>
<div id="container></div>
<div id="footer></div>
</div>
头应该有一个position: fixed（总是在屏幕顶部）但容器div应该在固定头div下面开始，而不是在它下面。
页脚应始终位于页面的底部。不固定。
有没有简单快捷的方法来解决这个问题（CSS）？我几乎可以得到它的工作，但是当我尝试将容器div放在下面（而不是下面）头部时，整个页面就会混乱起来。
这就是我的意思是： http://jsfiddle.net/jskjvpkv/1/
我发现我自己的解决方案，请参阅我的答案。
我不太清楚你的问题是什么：
如果是报头是不是顶部试试这个在它的CSS：
top: auto;
bottom: 100%;
页脚应该是：
position: static;
top: 100%;
bottom: auto;
如果您在头覆盖其他元素，你应该添加一些填充：
padding-bottom: 10px;
或无论你的标题是多大。
您需要添加top: 0px您header格，然后分配margin-top您container DIV等于固定header的高度，像下面的CSS：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: rgba(0, 0, 0, 1);
height: 60px;
position: fixed;
width: 100%;
top: 0px;
}
#container {
margin-top: 60px;
padding-bottom: 3.75em;
background: #c00;
height: 1000px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 3.75em;
background: rgba(0, 0, 0, 0.5);
}<div id="wrapper">
<div id="header"></div>
<div id="container">Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</div>
<div id="footer"></div>
</div>感谢您的评论。这会起作用，但是当您将容器的高度降低到50像素时，必须滚动才能看到页脚。你有解决的办法吗？此外，浏览器中应用的代码适用于Firefox，但不适用于Chrome。 – Patrick2607 2014-10-29 21:54:01
的代码工作完全正常的镀铬，因为我用自己的Chrome在写它。此外，就页脚而言，由于您使用的是“bottom：0”，因此它会贴在页面的底部。你可以删除它，并且页脚将出现在容器的后面，而不管容器的高度如何：http://jsfiddle.net/jskjvpkv/11/ – 2014-10-29 21:59:24
你可以把它像这样
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
position: relative;
}
#header {
background: rgba(0, 0, 0, 0.5);
height: 60px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#container {
position: relative;
top: 60px;
background: #c00;
min-height: calc(100% - 60px);
}
#footer {
width: 100%;
height: 3.75em;
background: rgba(0, 0, 0, 0.5);
position: relative;
}<div id="wrapper">
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
</div>这是这对我来说效果最好的解决办法：
html,
body {
\t margin:0;
\t padding:0;
\t height:100%;
}
#wrapper {
\t min-height:100%;
\t position:relative;
}
#header {
\t background:#ededed;
\t padding:10px;
}
#content {
\t padding-bottom:100px;
}
#footer {
\t background:#ffab62;
\t width:100%;
\t height:100px;
\t position:absolute;
\t bottom:0;
\t left:0;
}<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
您可以添加'保证金“顶”到包含呃div等于标题的高度 – kei 2014-10-29 21:39:29
然后页面混乱。我会做一个JSFiddle，坚持 – Patrick2607 2014-10-29 21:41:09