我没有容器,也没有包装器.
我只是有这样的布局……
- <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元素将随着内容的推移而去,但如果我没有任何内容,它本身就不会粘在屏幕的底部.决议无论如何
我多次遇到这个问题,从来不确定如何解决这个问题.所以,一些帮助将得到很多赞赏,以及一些解释.
非常感谢大家的帮助！
解决方法
使用这个配合,这是一个非常好解释和易于遵循的教程：
http://code.google.com/p/cleanstickyfooter/
最好的粘性页脚真的非常好用
从网站引用(我完全同意)：
The Difference
Google “sticky footer”,I have listed below why this technique works
better than the top results from this search.07001 – This technique is similar,but
cleanStickyFooter takes it much further. The technique located here
doesn’t play nicely when you want to make your footer have a width of
100%.07002 – This technique is one out of many I am referring to when I say its invasive with CSS clearing hacks.
