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

在这种情况下，你会在jsfiddle中看到我想要底部的页脚。

有没有办法在没有JS的情况下实现这个目标？

Answer 1

http://css-tricks.com/snippets/css/sticky-footer/我认为这就是你想要的。粘性页脚。 `你必须在最小高度设置你的内容：100％;最终高度：100％，并将你的html，body设置为：height：100％。希望它有所帮助

Answer 2

以下是您使用fiddle link

更新的css

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

Answer 3

也许您应该在Google上搜索响应式设计，这可以为您提供有关这些行为的一些见解。

例如，

Twitter Bootstrap允许做这样的事情您有Sticky footer，基于Twitter Bootstrap，它似乎可以满足您的需求。

Answer 4

Jeah可能，这仅使用css absolute定位。