强制页脚停留在底部?

时间:2011-10-07 15:05:40

标签: html css height footer sticky-footer

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

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

<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元素将随着内容的进行,但如果我没有任何内容本身,它将不会粘在屏幕的底部。分辨率无论如何。

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

非常感谢大家的帮助!

3 个答案:

答案 0 :(得分:8)

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

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

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

来自网站的引用(我完全同意):

  

差异

     

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

     

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

     

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

答案 1 :(得分:0)

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

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

如果是第二个,请使用position:fixed

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

答案 2 :(得分:0)

您可以查看this Artice by RyanFait

中指定的布局

跨浏览器,始终有效:)