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

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

有没有办法在没有 JS 的情况下实现这一点？

score 1 · Accepted Answer

http://css-tricks.com/snippets/css/sticky-footer/我认为这就是你想要的。粘性页脚。`您必须将内容设置为 min-height: 100%; 最终高度：100％，并将您的html，正文设置为：高度：100％。希望能帮助到你

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

0

耶，这是可能的，这仅css用于absolute定位。

于 2013-08-05T08:11:43.703 回答

4 回答 4