用CSS放置頁腳底部

Question

我想將頁腳放置在底部屏幕上，如位置：固定和底部0，如果沒有足夠的內容。但是當有更多的內容時，我希望頁腳在內容之後，而不是固定在底部。

HTML

<div id="header">Header</div> 
<div id="content"> 
    Bla 
</div> 
<div id="footer">sdfasdf</div> 

CSS

#header { background-color: gray; padding: 10px;} 
#footer { background-color: black; padding: 10px; color:white;} 

http://jsfiddle.net/FJWZu/

在這種情況下，你在我想在底部的頁腳的jsfiddle看到。

有沒有辦法實現這個沒有JS？

Answer 1

也許你應該谷歌搜索響應式設計這可能給你的那種行爲的一些見解。例如

Twitter Bootstrap例如允許做這樣的事情。
你有Sticky footer，基於Twitter的Bootstrap，似乎做你在找什麼。

Answer 2

這是可能的，這隻使用css與absolute定位。

http://jsfiddle.net/FJWZu/3/

Answer 3

http://css-tricks.com/snippets/css/sticky-footer/我認爲這是你想要的。粘腳。 `你必須在最小高度設置你的內容：100％;最終高度：100％，並將您的html，body設置爲：height：100％。 希望它可以幫助

Answer 4

這是你更新的CSS與fiddle link

#footer { background-color: black; padding: 10px; color:white; position: absolute; 
    width: 96%;bottom:0;}