CSS 如何在css中将页脚粘贴到底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1488565/
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
How to stick a footer to bottom in css?
提问by Amc_rtty
I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.
我遇到了在浏览器底部定位页脚的经典问题。我尝试过包括http://ryanfait.com/resources/footer-stick-to-bottom-of-page/在内的方法，但没有好的结果：我的页脚总是出现在 FF 和IE。
In the HTML i got this simple structure
在 HTML 中，我得到了这个简单的结构
<form>
...
<div class=Main />
<div id=Footer />
</form>
Here is the css code that is relevant for the css footer problem:
这是与 css 页脚问题相关的 css 代码：
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#Footer
{
background-color: #004669;
font-family: Tahoma, Arial;
font-size: 0.7em;
color: White;
position: relative;
height: 4em;
}
.Main
{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
/*top: 50px;*/
margin: 0 25% -4em 25%;
font-family: Verdana, Arial, Tahoma, Times New Roman;
font-size: 0.8em;
word-spacing: 1px;
line-height: 170%;
/*padding-bottom: 40px;*/
}
Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.
我哪里做错了？我真的什么都试过了。如果我错过了任何有用的信息，请告诉我。
Thank you for any suggestion in advance.
提前感谢您的任何建议。
Regards,
问候，
thank you all for your answers. it worked with:
谢谢大家的答案。它与：
position:absolute;
width:100%;
bottom:0px;
setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.
设置位置：fixed 由于某种原因在 IE 中不起作用（仍然在浏览器中间显示页脚），仅适用于 FF。
采纳答案by Nick Larsen
Try setting the styles of your footer to position:absolute;and bottom:0;.
尝试将页脚的样式设置为position:absolute;和bottom:0;。
回答by codedude
#Footer {
position:fixed;
bottom:0;
}
That will make the footer stay at the bottom of the browser window no matter where you scroll.
无论您在何处滚动，这都会使页脚停留在浏览器窗口的底部。
回答by Sheikh Naveed
#Footer {
position:fixed;
bottom:0;
width:100%;
}
worked for me
为我工作
回答by mbokil
I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content. See the example page I posted.
我认为很多人都在寻找底部滚动而不是固定的页脚，称为粘性页脚。当高度太短时，固定页脚将覆盖正文内容。您必须将 html、正文和页面容器设置为 100% 的高度，将页脚设置为绝对位置底部。您的页面内容容器需要一个相对位置才能工作。页脚的负边距等于页脚高度减去页面内容的底部边距。请参阅我发布的示例页面。
Example with notes: http://markbokil.com/code/bottomfooter/
回答by Bhawna Malhotra
#footer{
position: fixed;
bottom: 0;
}
回答by rzskhr
This worked for me:
这对我有用：
.footer
{
width: 100%;
bottom: 0;
clear: both;
}
回答by Abdelhameed Mahmoud
The following css property will do it
以下 css 属性将执行此操作
position: fixed;
I hope this help.
我希望这会有所帮助。
回答by Luke Vo
For modern browser, you can use flexlayout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)
对于现代浏览器，您可以使用flex布局来确保无论内容长度如何，页脚都保持在底部（如果内容太长，底部将不会隐藏内容）
HTML Layout:
HTML 布局：
<div class="layout-wrapper">
<header>My header</header>
<section class="page-content">My Main page content</section>
<footer>My footer</footer>
</div>
CSS:
CSS：
html, body {
min-height: 100vh;
width: 100%;
padding: 0;
margin: 0;
}
.layout-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.layout-wrapper > .page-content {
background: cornflowerblue;
color: white;
padding: 20px;
}
.layout-wrapper > header, .layout-wrapper > footer {
background: #C0C0C0;
padding: 20px 0;
}
回答by Chtiwi Malek
If you use the "position:fixed; bottom:0;" your footer will always show at the bottom and will hide your content if the page is longer than the browser window.
如果您使用“位置：固定；底部：0；” 如果页面长于浏览器窗口，您的页脚将始终显示在底部并隐藏您的内容。
回答by Dillie-O
I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main />section since the form tag itself causes issues with the lineup.
我在这个粘性页脚教程中遇到了类似的问题。如果没记错的话，您需要将表单标签放在 <div class=Main />部分，因为表单标签本身会导致阵容出现问题。
