用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;}