固定頁眉和頁腳

我試圖使固定頁眉和頁腳始終顯示在屏幕/頁面的底部。固定頁眉和頁腳

下面的主代碼工作正常，如果頭不固定。如果在CSS中啓用這個小部分，頁腳會變得混亂。如果我沒有，那麼標題不會被修正。

/* 
width: 100%; 
position: fixed; 
top: 0px; 
z-index: 1; 
*/

有沒有什麼機會幫助修改模式？

看的例子： 1,2，3和其他一些。

在此先感謝

CSS：

* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
html, body 
{ 
    height: 100%; 
    font-family: Verdana,Geneva,'DejaVu Sans',sans-serif; 
    font-size: 12px; 
    color: #333333; 
    background: #BABABA; 
} 
#container 
{ 
    min-height: 100%; 
    position: relative; 
} 
#header 
{ 
    display: block; 
    /* 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    z-index: 1; 
    */ 
    padding: 10px 10px 11px 10px; 
    color: #FFFFFF; 
    background: #000000; 
} 
#body 
{ 
    display: block; 
    margin-top: 40px; 
    padding: 10px; 
    padding-bottom: 40px; 
    /*background: #ff0000;*/ 
} 
#footer 
{ 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 20px; 
    border-top: 1px solid #EEEEEE; 
    padding: 9px 0px 3px 0px; 
    text-align: center; 
    font-size: 10px; 
    text-align: center; 
    color: #777777; 
    background: #000000; 
}

HTML：

<div id="container"> 
    <div id="header"> 
     HEADER 
    </div> 
    <div id="body"> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
     <p>Hello</p><br /> 
    </div> 
    <div id="footer"> 
     FOOTER 
    </div> 
</div>

來源

2013-02-21 BentCoder

更改#footer到固定位置 – Toping 2013-02-21 11:31:24

刪除'html，body：height：100％;'remove'#container：min-height：100％;'啓用註釋的css代碼，現在可以使用固定頁腳 – BentCoder 2013-02-21 11:38:51

所以，你不想被固定的頁腳，但不觸及底部屏幕？

如果這是你的問題，你應該這樣做：

#header{ 
    height: 40px; 
} 

#container{ 
    padding-top: 40px; 
}

如果你想你頁腳在頁面底部的顯示，你應該只設置了他的位置固定

#footer{ 
    position: fixed; 
}

來源

2013-02-21 11:31:25

刪除'html，body ：高度：100％;'刪除'#container：最小高度：100％;'啓用評論d CSS代碼，現在可以通過'footer fixed'工作。 – BentCoder 2013-02-21 11:40:11

固定頁眉和頁腳

回答

相關問題