CSS 粘性页脚边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11868249/
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 Sticky Footer Margin
提问by Connor
I do NOT want a FIXED footer, I need a STICKY footer.
我不想要一个固定的页脚，我需要一个粘性的页脚。
My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.
我的粘性页脚起初工作得很好，但是当内容达到一定高度时，页脚和页面底部之间会有边距。
Try messing with the browser height and content div height, and you should see where the problem is.
尝试弄乱浏览器高度和内容 div 高度，您应该会看到问题所在。
It leaves an awkward margin between the footer and the bottom of the page.
它在页脚和页面底部之间留下了一个尴尬的边距。
Thank you in advance.
先感谢您。
CSS Code:
CSS 代码：
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<a href=""><span>About Us</span></a>
<span> | </span>
<a href=""><span>Contact Us</span></a>
<span> | </span>
<a href=""><span>Home</span></a>
</div>
</body>
采纳答案by Luis
Just add position: fixed;to your footerclass in your css:
只需添加position: fixed;到您footer在你的CSS类：
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----UPDATE-----
-----更新-----
If you need a footer that stays at the bottom you need two things:
如果你需要一个留在底部的页脚，你需要做两件事：
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin: 0 auto;
min-height: 100%;
min-height: 700px; /* only for Demo purposes */
padding-bottom: -30px;
width: 985px;
position: relative; /*and you need to add this */
}
#footer {
background: #000;
border-top: 1px solid #00F0FF;
height: 30px;
margin-top: -30px;
padding: 5px 0;
width: 100%;
position: relative; /*use relative position*/
}<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<a href=""><span>About Us</span></a>
<span> | </span>
<a href=""><span>Contact Us</span></a>
<span> | </span>
<a href=""><span>Home</span></a>
</div>回答by Samuel
Add position: fixedto the footer class. Note it doesn't work in certain old versions of Internet Explorer. http://jsfiddle.net/kAQyK/
添加position: fixed到页脚类。请注意，它在某些旧版本的 Internet Explorer 中不起作用。http://jsfiddle.net/kAQyK/
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed;
bottom: 0px;
left: 0px;
}
See http://tagsoup.com/cookbook/css/fixed/for examples how to make it also work in IE
请参阅http://tagsoup.com/cookbook/css/fixed/有关如何使其在 IE 中也能工作的示例
回答by Dominic
I was having the same issue for ages and nothing seemed to work then I realised that the whitespace I was seeing under my footer was not actually whitespace at all but the overflow from my footer with white text on a white background. All I had to do was to add:
我多年来一直遇到同样的问题，但似乎没有任何效果，然后我意识到我在页脚下看到的空白实际上根本不是空白，而是页脚溢出的白色背景上的白色文本。我所要做的就是添加：
overflow:hidden
to my footer in my css.
到我的 css 中的页脚。
If anyone wants the solution that worked for me then it is the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.htmlbut with the added overflow:hidden
如果有人想要对我有用的解决方案，那么它与http://getbootstrap.com/2.3.2/examples/sticky-footer.html相同，但添加了溢出：隐藏
回答by J.T. Houtenbos
DISPLAY TABLE = NO JS and NO fixed height!
显示表 = 无 JS 且无固定高度！
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
在现代浏览器（IE 8 +）中工作 - 我在几个浏览器中测试了它，它似乎运行良好。
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
我发现了这个解决方案，因为我需要一个没有固定高度和 JS 的粘性页脚。代码如下。
Explanation:Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table;The wrapper is set to display: table-row;If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
说明：基本上你有一个包含 2 个子元素的容器 div：一个包装器和一个页脚。将页面上需要的所有内容（页脚除外）放在包装器中。容器设置为display: table;包装器设置为display: table-row;如果将 html、正文和包装器设置为height: 100%，则页脚将粘在底部。
The footer is set to display: table;as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row;This will not allow you to set margin-topon the footer. You need to get creative with more nested elements in that case.
页脚也设置display: table;为。这是必要的，以获得子元素的边距。您也可以将页脚设置为display: table-row;这将不允许您margin-top在页脚上进行设置。在这种情况下，您需要使用更多嵌套元素来发挥创意。
The solution:https://jsfiddle.net/0pzy0Ld1/15/
解决办法：https : //jsfiddle.net/0pzy0Ld1/15/
And with more content:http://jantimon.nl/playground/footer_table.html
还有更多内容：http : //jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>