我的粘腳不起作用

我知道這個問題已經被問了很多次了，但是我還沒有找到一個適合我的解決方案。我的粘腳不起作用

我的HTML ...

<body> 
     <div id="container"> 
     </div> 
     <div id="footer"> 
     </div> 
</body>

我的CSS ....

body, html { min-height:100%;} 

#container 
    width: 980px; 
    min-height: 100%; 
    margin: 0 auto;} 

footer { 
    background-color: rgb(90,200,219); 
    height: 50px; 
    position: realative; 
    margin-top: -50px; 
    width: 100%; }

發生了什麼，是頁腳完全粘在頁面的底部。但是，當內容很短時，我仍然需要向下滾動才能找到粘在底部的頁腳。有人能告訴我我的代碼有什麼問題嗎？

來源

2013-04-18 Becs Carter

有幾個錯別字; '＃footer'和'position：relative;'。 – Owlvark

啊，是的。那是我把它放在這裏不同。我的實際代碼沒有錯別字 –

嘗試這些方法，我把它們放在一起。

body, html { /*body and html have to be 100% to push header down */ 
    height:100%; 
    width: 100%; 
} 
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */ 
    position: relative; 
    height: auto; 
    min-height: 100%; 
} 
#header { 
    height: 100px; 
    background: rgba(255,255,255,0.2); 
} 
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */ 
    padding-bottom: 100px; 
} 
#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: rgba(255,255,255,0.2); 
    position: absolute; 
    bottom: 0; 
}

來源

2013-04-18 21:48:12

謝謝！爲身體添加'身高：100％'並且html做了訣竅 – pastullo

我想你應該修理你的CSS代碼片段，因爲它有很多錯誤的東西。使用複製&粘貼下次放置在這裏，這樣你的錯字不會丟掉任何人。

這應該是height:100%;，但我認爲這可能是一個錯字，你是說頁腳粘在底部，這也不會，如果該行真的在你的實際CSS。

#container缺少一個括號，應該是#container {。

如果這些問題是固定的，除了@Owlvark指出的問題。這似乎在這裏工作很好，在jsFiddle。我能想到的唯一改進是將margin: 0px;添加到body, html，這可能是您的問題，因爲它擺脫了一些將呈現垂直滾動條的額外空間。但是當你說你必須「向下滾動才能找到頁腳」時，你的問題似乎更嚴重。

來源

2013-04-18 22:04:44

我的粘腳不起作用

回答

相關問題