Html 固定页脚的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13788357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for Fixed Footer
提问by user687554
I have a pretty basic HTML page. The code looks like the following:
我有一个非常基本的 HTML 页面。代码如下所示：
<body>
<header style="min-height: 255px;">
</header>
<article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
Body text goes here.
</article>
<footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
Copyright information
</footer>
</body>
Usually, my body text is fairly large. The text is large enough that a scroll bar is required. It looks like the footer sits on top of the text towards the bottom. Then, when I scroll down, the footer doesn't stay fixed. What am I doing wrong?
通常，我的正文相当大。文本足够大，需要滚动条。看起来页脚位于底部的文本顶部。然后，当我向下滚动时，页脚不会保持固定。我究竟做错了什么？
Thank you
谢谢
回答by Philipp Hofmann
You need position:fixed;in your footer:
您需要position:fixed;在页脚中：
<body>
<header style="min-height: 255px;">
</header>
<article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
Body text goes here.
</article>
<footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
Copyright information
</footer>
</body>
回答by GolezTrol
Change position: absoluteof the footer to position: fixed.
position: absolute将页脚更改为position: fixed.
Why? This explains how they differ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/I think in your case the problem is that the absoluteelement is attaching to the body, thus it will scroll with the body.
为什么？这解释了它们的不同https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下问题是absolute元素附着在身体上，因此它将随着身体滚动。
回答by Praveen Kumar Purushothaman
Use position: fixedinstead of position: absolute.
使用position: fixed代替position: absolute。
<footer style="position: fixed;">
Why? This explains how they differ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/I think in your case the problem is that the absolute element is attaching to the body, thus it will scroll with the body.
为什么？这解释了它们的不同https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下问题是绝对元素附着在身体上，因此它会随着身体滚动。
回答by Koushik Das
I am writing this answer because I think it may help someone in the future. I am facing a problem even after defining the heightof the footer and margin-bottomfor the body.
The problem is if you have responsive website where the height of the footer dynamically changes based on screen size, you will have content overlapping. To solve that, I have used jQuery - Keep every setting same except for margin-bottomfor bodyand heightof footer.
我写这个答案是因为我认为它可能在未来对某人有所帮助。即使在定义height了页脚和margin-bottom正文之后，我仍然面临一个问题。问题是，如果您有响应式网站，其中页脚的高度根据屏幕大小动态变化，您将有内容重叠。为了解决这个问题，我已经使用jQuery的-保持每个设置除了同margin-bottom为body和height页脚。
var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
$('#main_footer').css('height', footerHeight + "px");
$('body').css('margin-bottom', footerHeight + 10 + "px");
This will always keep the footer at the bottom even when the footer height changes and there wil be no content over lapping.
即使页脚高度发生变化，这也将始终将页脚保持在底部，并且不会有内容重叠。
