粘性頁腳比不適用於所有頁面

我目前正在研究需要某種粘性頁腳但不是在所有地方的網站。粘性頁腳比不適用於所有頁面

所以，http://www.hostcule.org/newsite/

對於主頁，頁腳粘在底部自動，但對於其他的網頁，它並不如http://www.hostcule.org/newsite/about-us

如何使用CSS，得到它堅持底部？

的頁腳DIV

#footer{ 
    clear:both; 
    float:left; 
    width:100%; 
    border-top:solid 1px #d1d0d0; 
    background-color:#f1efef; 
    margin-bottom:-10px; 
}

來源

2009-12-19 bear

我去過能夠做到目前最好的CSS是推動頁腳在頁面的底部，所以它始終是關閉屏幕的底部。以下是如何執行此操作的示例。該stickyfooterfail師不起作用，我不知道爲什麼，但bottom屬性確實工作，如果你將position絕對。

<html> 
    <head> 
    <style type='text/css'> 
body { 
height: 100%; 
} 

#fullheight { 
background:#ff0; 
position: relative; 
min-height: 100%; 
} 
#stickyfooterfail { 
position: relative; 
bottom: 0px; 
} 

#stickyfooter { 
background: #f0f; 
} 
    </style> 
    </head> 
    <body> 
    <div id='fullheight'> 
     Some text<br> 
     Some text<br> 

     Some text<br> 
     <div id='stickyfooterfail'> 
     Should be at the bottom but isn't 
     </div> 
    </div> 
    <div id='stickyfooter'> 
     This is pushed off the bottom by the min-height attribute of #fullheight 
    </div> 
    </body> 
</html>

如果您知道頁腳將是恆定的絕對規模，那麼你可以設置padding-bottom到 - （高度），例如-40px如果是40像素高，然後設置#stickyfooterfail的bottom爲相同的值。

來源

2009-12-19 16:16:52 bearver

'＃stickyfooterfail'不起作用，因爲相對定位的元素相對於其在流中的原始位置進行定位。因此，設置'bottom：0'意味着您將div零點像素的底部從原始位置向上移動。即一點也不。 – mercator 2009-12-19 19:06:15

當我讀到它的規則時，我誤解了，因爲我認爲它是相對於父元素定位的。感謝您的澄清。 – bearver 2009-12-20 11:30:09

粘性頁腳比不適用於所有頁面

回答

相關問題