logo标签列表

如何让页面底部的页脚固定在底部？

htmlcssheightfootersticky-footer
9

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

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

<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;
}

我知道如果在CSS文档中的HTML元素应用min-height: 100%;，那么它将随内容一起变化，但是如果没有实际内容，它将无法停留在屏幕底部。无论分辨率如何。

我已经多次遇到这个问题，从来不知道该怎么解决。因此，需要一些帮助以及解释。

非常感谢大家的帮助！

1
但是如果我没有任何实质内容，最终你应该有内容，那又有什么关系呢？真的没有人在意你的页脚是否粘在底部，而不是在内容下方。我不明白为什么人们要浪费这么多时间去实现这种毫无价值的效果。 - animuson
1
@animuson：我在意它是否固定在底部。如果我的设计中页脚没有固定在底部，那看起来会很荒谬。不过还是感谢你的建议。 :) - Aaron Brewer
可能是重复的问题：如何使页脚固定在页面底部 - Rune FS
3个回答
8
请使用这个，它是一个非常详细易懂的教程：http://code.google.com/p/cleanstickyfooter/。 这是最好的粘性页脚，非常有效。引用网站上的话（我完全同意）：“区别在于，当你想让页脚宽度为100％时，这种技术比此搜索结果的前几项更加有效。” 我们不建议使用http://ryanfait.com/sticky-footer/，因为该技术不能很好地处理页脚宽度为100％的情况。我们也不建议使用http://www.cssstickyfooter.com/，因为该技术需要使用CSS清除Hack。
0
你想让页脚无论内容量多少都附着在内容底部，还是无论内容量多少都附着在屏幕底部？
如果是前者，不需要定位 - 让它随着页面流动到内容后面即可。
如果是后者，使用 position: fixed。
你可能需要更清楚一些。什么会滚动？头部？左边？右边？页脚？左边和右边是否属于你的整体内容？为什么你的 Body 位置相对？为什么 html 有 "height: 100%;"？
我希望页脚附着在内容的底部和屏幕底部，如果没有足够的内容使其流动到屏幕底部，我仍然希望它固定在屏幕底部，这样说您明白了吗？我不想使用固定位置，因为那样它将始终固定在屏幕底部，而不考虑我拥有的内容量，并且需要在其中一个内容div上应用边距和/或填充。左侧和右侧是内容，更多是右侧。 - Aaron Brewer
0
从Google上面...http://ryanfait.com/sticky-footer/ - 这个技术类似，但是cleanStickyFooter更进一步。这里的技术在你想让页脚宽度为100%时不太好用。 - Aaron Brewer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接