頁眉始終位於頂部，頁腳始終位於底部

Question

基本上，我試圖將頁眉固定在頁面頂部，同時我也需要頁腳位於頁面底部，無論內容是多還是少。 但是我不希望我的頁腳位置固定。 因此，只要有大量的數據頁腳移動就可以了。 如果我不修復標題，我現在正在使用的代碼將非常有用。

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

CSS是

    *{ margin:0px; padding:0px;}
    html{
    margin:0;
    padding:0;
    height:100%;
    }
    body {
    min-height:100%;
    position:relative;
    }
    #header {
    padding:10px;
    background:#5ee;
    }
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

這是代碼，我沒有在此修復標頭，但是我需要一些幫助來修復它。

Answer 1

您要查找的內容專門稱為“粘性頁腳”。

http://www.cssstickyfooter.com/

Answer 2

如果我沒聽錯，對我來說，您似乎在追隨頭貼。 嘗試將以下兩個規則替換為

     #header{
        background: none repeat scroll 0 0 #55EEEE;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
     }
     #content{
        background: none repeat scroll 0 0 #FF0000;
        color: #FFFFFF;
        height: 2000px;
        margin: 40px 0 0;
        padding: 10px 10px 80px;
     }

這是更改#content高度影響頁腳位置但不影響頁眉位置的演示。

Answer 3

用這個

position:fixed;

為您的標題。

至於頁腳-請使用此http://ryanfait.com/sticky-footer/

頁眉始終位於頂部，頁腳始終位於底部

問題描述

3 個解決方案

解決方案1
2 2013-04-24 12:23:10

解決方案2
0 2013-04-24 12:30:28

解決方案3
-4 2013-04-24 12:21:50

頁眉始終位於頂部，頁腳始終位於底部

問題描述

3 個解決方案

解決方案1 2 2013-04-24 12:23:10

解決方案2 0 2013-04-24 12:30:28

解決方案3 -4 2013-04-24 12:21:50

解決方案1
2 2013-04-24 12:23:10

解決方案2
0 2013-04-24 12:30:28

解決方案3
-4 2013-04-24 12:21:50