强制页脚停留在底部?

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

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

非常感谢大家的帮助!

fms*_*msf 8

使用这个配合,这是一个非常好解释和易于遵循的教程:

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

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

从网站引用(我完全同意):

区别

谷歌"粘性页脚",我在下面列出了为什么这种技术比这次搜索的最佳结果更好.

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

http://www.cssstickyfooter.com/ - 当我说用CSS清除黑客攻击时,这种技术是我指的很多.