页脚始终在底部，页眉/高度固定

Question

好的，所以我试图弄清楚如何解决这个问题：

<div id="wrapper">
    <div id="header"></div>
    <div id="container></div>
    <div id="footer></div>
</div>

标头应具有以下position: fixed （始终在屏幕顶部），但container-div应该在固定标头div下方开始，而不是在其下方。

页脚应始终位于页面底部。 不固定。

有没有简单快捷的方法来解决此问题（CSS）？ 我几乎可以使它工作，但是当我尝试将container-div放置在标题的下方（而不是下方）时，整个页面混乱了。

这就是我的意思： http : //jsfiddle.net/jskjvpkv/1/

我找到了自己的解决方案，请参见我的答案。

Answer 1

我不太确定您的问题是什么：

如果标题不在顶部，请在CSS中进行尝试：

top: auto;
bottom: 100%;

页脚应为：

position: static;
top: 100%;
bottom: auto;

如果您将标题覆盖在其他元素上，则应添加一些填充：

padding-bottom: 10px; 

或者您的标题太大。

Answer 2

您需要将top: 0px添加到header div中，然后将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> 

jsFiddle演示 。

Answer 3

你可以这样

 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> 

Answer 4

这是最适合我的解决方案：

 html, body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #header { background:#ededed; padding:10px; } #content { padding-bottom:100px; } #footer { background:#ffab62; width:100%; height:100px; position:absolute; bottom:0; left:0; } 

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