用 CSS 放置页脚底部答案

【问题标题】：placed a footer bottom with CSS用 CSS 放置页脚底部
【发布时间】：2013-08-05 21:05:53
【问题描述】：

如果没有足够的内容，我想将页脚放在底部屏幕上，例如位置：固定和底部 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 的情况下实现这一点？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是 fiddle link 更新后的 css

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

【讨论】：

【解决方案4】：

这是可能的，这仅使用 css 和 absolute 定位。

【讨论】：