在頁面底部保留頁腳

當我使用bottom:0;時，如果我沒有足夠的內容，頁腳就應該是它的位置，但是如果我有用戶必須在頁面上滾動的內容，則頁腳停留在地方和一旦滾動，頁腳在屏幕中間。在頁面底部保留頁腳

當我不使用bottom:0;並且我確實有滿足屏幕的內容時，頁腳就是它應該在的位置，但是如果我沒有足夠的內容，頁腳就不是它應該在的位置，頁面的中間。

他們都工作，但只有當某些條件得到滿足。我怎樣才能始終在底部應該與內容還是沒有內容？

.footer{ 
    background-color:#99C; 
    background-repeat: repeat; 
    width:100%; 
    position:absolute; 
    bottom:0; 
} 

html,body{ 
    padding:0; 
    height:100%; 
    width: 100%; 
    margin:0; 
}

來源

2012-08-14 user1455112

您是否嘗試過這樣的：http://www.cssstickyfooter.com/？ – j08691 2012-08-14 20:52:09

修復了它。謝謝！ – user1455112 2012-08-14 21:13:38

在這裏，試試這個website，它解釋瞭如何去做。

而且，例如

HTML：

<html> 
    <head></head> 
    <body> 
     <div id="container"> 
     <div id="header"></div> 
     <div id="content"></div> 
     <div id="footer"></div> 
    </div> 
    </body> 
</html>

CSS：

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

div#container { 
    position:relative; 
    margin:0 auto; 
    width:750px; 
    height:auto !important; 
    height:100%; 
    min-height:100%; 
} 

div#header { 
    height:150px; 
    background-color:red; 
} 

div#content { 
    padding-bottom:150px; 
    height:800px; 
    background-color:green; 
} 

div#footer { 
    position:absolute; 
    width:100%; 
    bottom:0; 
    height:150px; 
    background-color:blue; 
}

的jsfiddle：http://jsfiddle.net/gdy8K/

注意，#header和#content高度只是有使div使用一些空間。儘管如此，#footer空間是必要的並且應該與#contentpadding-bottom相匹配。 background-color也只是爲了演示。

您還應該注意，如果您使用的是asp.net，請不要忘記您的內容通常位於form標記中。你必須添加form第一CSS規則，這樣

html,body,form { 
    margin:0; 
    padding:0; 
    height:100%; 
}

來源

2012-08-14 20:55:11 Shadowxvii

請在此處添加相關信息。這樣，即使鏈接失效，您仍然可以獲得有效的答案。 – PeeHaa 2012-08-14 20:56:50

對不起。我添加了一個示例代碼。 – Shadowxvii 2012-08-15 14:14:27

@shadownxvii謝謝！ – PeeHaa 2012-08-15 14:14:59

在頁面底部保留頁腳

回答

相關問題