Question

我没有容器，也没有包装器。

我只是有一个像这样的布局......

<body>

<div id="header">
</div>

<div id="left">
</div>

<div id="right">
</div>

<div class="clear"></div>

<div id="footer">
</div>

我想要做的是确保页脚总是停留在屏幕的底部，无论我的内容是否相当远，甚至没有足够的内容一直到屏幕的底部。

截至目前，我可以通过上面列出的两种方式工作，但我希望两者都有效。

这是我为此设置的CSS。

html {
height: 100%;
}

body {
height: 100%;
position: relative;
}

#footer {
position: absolute;
bottom: 0;
}

我知道如果我应用最小高度：100％;到CSS文档中的HTML元素将随着内容的进行，但如果我没有任何内容本身，它将不会粘在屏幕的底部。分辨率无论如何。

我多次遇到过这个问题，而且从来不确定如何解决这个问题。因此，我们非常感谢一些帮助以及一些解释。

非常感谢大家的帮助！

Answer 1

使用这个配偶，这是一个非常好解释且易于学习的教程：

http://code.google.com/p/cleanstickyfooter/

最好的粘性页脚真的非常好用

来自网站的引用（我完全同意）：

差异

谷歌“粘性页脚”，我在下面列出了这项技术的工作原理   优于此搜索的最高结果。

http://ryanfait.com/sticky-footer/ - 这种技术很相似，但是   cleanStickyFooter更进一步。技术位于这里   当你想让你的页脚有宽度时，不能很好地发挥   100％。

http://www.cssstickyfooter.com/ - 这项技术是我的很多选择之一   我指的是当我用CSS清除黑客攻击它时。

Answer 2

您希望页脚无论内容量多少都附在内容的底部，或者无论内容量多少都在屏幕底部？

如果是第一个，请不要费心定位 - 让它与内容后的页面流一起去。

如果是第二个，请使用position：fixed

您可能需要更清楚一些。什么卷轴？页眉？剩下？对？页脚？左右是您整体内容的一部分吗？为什么你的身体处于相对位置？为什么你有“身高：100％;”对于HTML？

Answer 3

您可以查看this Artice by RyanFait

中指定的布局

跨浏览器，始终有效：）

强制页脚停留在底部？

3 个答案: