CSS 删除页脚下的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26202321/
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
Remove white space under footer
提问by User014019
How to remove white space under footer bar? I already remove padding:15px under footer, but its not working.
如何删除页脚栏下的空白？我已经删除了页脚下的 padding:15px，但它不起作用。
Here's the site
这是网站
CSS
CSS
#bottom-footer{
background: #909090;
text-transform: initial;
padding: 15px;
font-family: 'Arial', 'sans-serif';
color: #000000;
font-weight: 300;
}
#bottom-footer .site-info{
float: left;
font-size: 14px;
color: #000;
line-height: 1.8;
}
#bottom-footer .site-page{
float: right;
font-size: 14px;
line-height: 1.8;
color:#D00000;
}
#bottom-footer .copyright{
float: right;
padding-top:20px;
margin-left:600px;
}
#bottom-footer .logos{
float: left;
padding-top:20px;
margin-right:50px;
}
回答by webkit
I'm assuming you want your footer to stick to the bottom of the window except for when the content is higher then the window.. I suggest a few things:
我假设你希望你的页脚粘在窗口的底部，除非内容高于窗口..我建议一些事情：
Fix your html, for example, all your content is inside your header tag, that's probably a mistake.
To make your footer work correctly, I would use the css calc method to give your content a minimum height of 100% minus the height of your header+footer, as such (notice also a few important css rules to make this work):
修复您的 html，例如，您的所有内容都在您的标题标签内，这可能是一个错误。
为了使您的页脚正常工作，我将使用 css calc 方法为您的内容提供 100% 的最小高度减去页眉+页脚的高度，因此（请注意一些重要的 css 规则以使其工作）：
html,body,#page,header { height:100%;}
html,body,#page,header { height:100%;}
#content {
min-height: calc(100% - 285px); // 285 should be the height of your header + height of footer.
}
** Notice that calc method needs to be written exactly as above (spaces and all) to work.. browser support link
** 请注意， calc 方法需要完全按照上述（空格和所有）编写才能工作..浏览器支持链接
Option 2
选项 2
Another way you can achieve this:
实现此目的的另一种方法：
html,body,#page, header { height:100%;}
#page { position:relative;}
#content { padding-bottom:130px;} /* FOOTER HEIGHT */
footer { position:absolute; bottom:0;}
If you have any question feel free..
如果您有任何问题，请随时..
回答by undefinedtoken
Try giving dynamic margin-bottomvalue to your #content
尝试margin-bottom为您的#content赋予动态价值
So the margin-bottomvalue will be same as the height of your footer
所以该margin-bottom值将与页脚的高度相同
回答by undefinedtoken
Or you can use this http://ryanfait.com/html5-sticky-footer/
或者你可以使用这个 http://ryanfait.com/html5-sticky-footer/
Keeps footer always to the bottom
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
/*
