頁腳始終在底部，頁眉/高度固定

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>