Aar*_*wer 9 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>
Run Code Online (Sandbox Code Playgroud)
我想要做的是确保页脚始终保持在屏幕的底部,无论我的内容是否相当远,甚至没有足够的内容一直到屏幕的底部.
截至目前,我可以通过上面列出的两种方式工作,但我希望两者都有效.
这是我为此设置的CSS.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
Run Code Online (Sandbox Code Playgroud)
我知道如果我应用最小高度:100%; 到CSS文档中的HTML元素将随着内容的进行,但如果我没有任何内容本身,它将不会粘在屏幕的底部.决议无论如何
我多次遇到这个问题,从来不确定如何解决这个问题.因此,我们将非常感谢一些帮助以及一些解释.
非常感谢大家的帮助!
使用这个配合,这是一个非常好解释和易于遵循的教程:
http://code.google.com/p/cleanstickyfooter/
最好的粘性页脚真的非常好用
从网站引用(我完全同意):
区别
谷歌"粘性页脚",我在下面列出了为什么这种技术比这次搜索的最佳结果更好.
http://ryanfait.com/sticky-footer/ - 这种技术类似,但cleanStickyFooter更进一步.当你想让你的页脚宽度为100%时,这里的技术不能很好地发挥作用.
http://www.cssstickyfooter.com/ - 当我说用CSS清除黑客攻击时,这种技术是我指的很多.