Html 将页脚保持在页面底部（如果需要，可以滚动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28128400/
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
Keep footer at the bottom of the page (with scrolling if needed)
提问by Paul
I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.
我正在尝试在页面底部显示页脚。如果页面长于 1 个屏幕，我喜欢页脚仅在滚动到底部后显示。所以我不能使用“位置：固定”，因为它会一直显示。
I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html
我正在尝试复制以下示例：http: //peterned.home.xs4all.nl/examples/csslayout1.html
However when I use the following, the footer is showing halfway my long page for some reason.
但是，当我使用以下内容时，由于某种原因，页脚显示在我长页面的一半。
position: absolute; bottom:0
I have both short pages and long pages and I would like it to be at the bottom of both of them.
我有短页和长页，我希望它位于它们的底部。
How can I keep the footer at the bottom on a long page as well?
如何将页脚也保持在长页面的底部？
Fiddle
小提琴
I've created these Fiddles to show the problem and test the code. Please post a working example with your solution.
我创建了这些 Fiddles 来显示问题并测试代码。请发布一个包含您的解决方案的工作示例。
My footer css:
我的页脚css：
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
.content {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
/* --- Footer --- */
.footerbar { position: absolute;
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px; }
a.nav-footer:link,
a.nav-footer:visited { color: white !important; }
a.nav-footer:hover,
a.nav-footer:focus { color: black !important;
background-color: #E7E7E7 !important; }
回答by scmccarthy22
I would suggest the "sticky footer" approach. See the following link:
我建议使用“粘性页脚”方法。请参阅以下链接：
回答by Dustin Scott Garza
Replace Height with overflow:auto; & give body a position
用溢出替换高度：自动；&给身体一个位置
html,body {
position:relative; <!--Also give it a position -->
margin:0;
padding:0;
overflow:auto; <!-- HERE -->
}
Position the footer to be relative to body
将页脚定位为相对于身体
/* --- Footer --- */
.footerbar {
position: relative; <!-- HERE -->
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px;
}
It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.
在所有可能的情况下，相对定位您的元素总是更好，尤其是您的主要元素，例如在这种情况下的页脚。
Short Page Edit
短页编辑
min-height:400px; <!-- Give this a real number like 400px
or whatever you want...dont leave it to 100% as -->
}
回答by Shankar
We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us. There were always surprises that required more hacks and more patches. here is what we have settled for:
一段时间以来，我们一直在努力解决这个问题。几个嵌套 div 中的 div 加上黑客和补丁对我们来说变成了一场噩梦。总是有惊喜，需要更多的黑客和更多的补丁。这是我们已经解决的问题：
css:
css：
html, body {
margin: 0px;
padding: 0px;
height: 100%;
color: #6f643a;
font-family: Arial;
font-size: 11pt;
}
form {
height: 100%;
}
body:
身体：
<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" >
contents goes here
</td>
</tr>
<tr>
<td valign="top" bgcolor="gray" align="center" style="padding:20px">
<font color="#FFFF00">copyright:Puppy</font>
footer goes here
</td>
</tr>
</table>
That is all you need. - if you are using asp.net don't ignore form height.
这就是你所需要的。- 如果您使用的是 asp.net，请不要忽略表单高度。
回答by deepak raghuwanshi
Now we have flex-box which is very straight forward.
现在我们有了非常简单的 flex-box。
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Note: we must contain only two div inside the body. One for footer and another for rest items
注意：我们必须在 body 内只包含两个 div。一个用于页脚，另一个用于休息项目
回答by Parvez Rahaman
html,body {
margin:0;
padding:0;
height:100%;
}
.content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
.footerbar {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
If IE7
如果 IE7
<!--[if lt IE 7]>
<style type="text/css">
.content { height:100%; }
</style>
<![endif]-->
回答by Parvez Rahaman
There is an excellent footer tutorial here.
有一位优秀的页脚教程 这里。
The demo page is here.
演示页面在 这里。
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
基本前提是主体页面被拉伸到页面的 100%。最小高度也是 100%。
The footer is then given the following rules:
然后为页脚提供以下规则：
.footerbar {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
