CSS 如何使页脚固定在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5189238/
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 make a footer fixed in the page bottom
提问by rodrigoalvesvieira
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
在我的 html 中，我有一个分类为“页脚”的 div。我希望它有一个 bg 到 #000 并占据整个页面宽度并且在它之后没有留下空白。
I am currently using this CSS:
我目前正在使用这个 CSS：
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
但是整个页面宽度没有填充这个 css 代码。
Any help? Thanks!
有什么帮助吗？谢谢！
回答by Chris Sobolewski
I use sticky footer: http://ryanfait.com/sticky-footer/
我使用粘性页脚：http: //ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
本质上，包装器的高度为 100%，页脚的高度为负边距，确保页脚始终位于底部而不会导致滚动。
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
这应该可以实现具有 100% 宽度的页脚和更窄的主体的目标，因为 div 是块级元素，并且它们的宽度默认为其父级的 100%。请记住，这里的页脚不包含在包装器 div 中。
回答by Jason
you could make the footer div absolute to the page like this:
您可以像这样使页脚 div 绝对到页面：
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
回答by Jared
I use a few DIVelements for each section of my webpages.
我DIV为网页的每个部分使用了一些元素。
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100%width.
每个部分都是相对定位的。使用 wrapping DIVs，我可以将包装器设置为特定的宽度，其中的元素可以是100%宽度。
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
我建议您避免使用绝对定位和浮动，因为它们会造成兼容性问题，因此可能无法在所有浏览器上正确显示。
回答by rodrigoalvesvieira
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
我很高兴你们提供的支持，每一个回复都以某种方式帮助了我。我来到这个代码：
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
谢谢！
回答by 8611670474
回答by Kuntady Yathish
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
当我使用 Bootstrap 菜单和固定页脚启动 Web 应用程序时，我遇到了这个问题，而不管浏览器分辨率如何。
Use below styling for footer element
对页脚元素使用以下样式
In-line style
内嵌样式
External style sheet using class attribute in Div
在 Div 中使用 class 属性的外部样式表
<div class="footer"></div>
style.css
样式文件
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
在 Div 中使用 id 属性的外部样式表
<div id="divfooter"></div>
style.css
样式文件
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
回答by Isaac Shrestha
You can use this styles in your CSS to achieve your goal
您可以在 CSS 中使用此样式来实现您的目标
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
如果您使用引导程序，请尝试使用 margin-left: -15px 和 margin-right:-15px 但在大多数情况下，如果您有自己的类，则不需要。
回答by Kristóf K?bl?s
html:
html：
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
css：
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
