頁腳不會粘在底部

我正在使用struts2應用程序。當我處理jsp頁面時，發生了一個問題，當頁面內容少於頁面內容時，頁面內容會浮動，這看起來很糟糕。超過頁面然後它自動浮動到底部。這對我來說可以。任何幫助將不勝感激...頁腳不會粘在底部

在CSS中使用頁腳中的代碼是...

#footer { 
    height:41px; 
    background:url(../images/main-bg.png) repeat-x; 
    width: 100%; 
}

來源

2012-12-31 Aniket

你可能想使頁腳粘..：請參考本教程http://ryanfait.com/resources/ footer-stick-to-bottom-of-page/ –

對於粘頁腳（總是在頁面的底部，無論是頁面的高度），使用position: fixed;

#footer { 
    height:41px; 
    background:url(../images/main-bg.png) repeat-x; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    }

來源

2012-12-31 07:46:52

我已經使用position：fixed，但是使用它的問題在下面的答案中得到了解釋... – Aniket

該問題很容易解決：爲主要內容設置一個margin-bottom ，與頁腳高度相同;）順便說一句，我也會移動頁腳，它更乾淨。 –

#footer { \t height：41px; background：url（../ images/main-bg.png）repeat-x; position：absolute; \t margin-bottom：41px; \t寬度：100％; }我解決這個問題的第一個問題，但是當內容少的時候，我只想打印一行，頁腳立刻就在任何解決方案的下方。 – Aniket

如果你正在尋找讓頁腳是沒有得到受滾動然後position:fixed會做瀏覽器窗口中始終可見。但是，如果內容更多，並且您需要滾動，並且頁腳仍保留在與內容重疊的查看區域中，那麼這看起來會很糟糕。一個乾淨的解決方案是將footer標記移動到wrapper div之外。喜歡的東西，應該是不錯的：

SAMPLE DEMO

CSS-

html, body { 
    height: 100%; 
} 
#wrapper { 
    background-color:yellow; 
    height: 90%; //sharing the height between wrapper and footer 
    margin:0px; 
} 
#footer { 
    background-color:green; 
    height: 10%; 
    min-height:20px; 
    max-height:40px; 
}

來源

2012-12-31 08:40:48 Cdeez

頁腳不會粘在底部

回答

相關問題