好底，所以我試圖找出如何得到這個工作了：頁腳始終與固定頭/高
<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