twitter-bootstrap 我的引导页面页脚下方的空白区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28504270/
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
White space below footer on my bootstrap pages
提问by Marian Stevens
While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages. Do I merely need to make my content longer to fill the vertical space? I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma. here's a link to an offending page:
虽然我之前在身体下方固定了 50 像素的填充，但我仍然遇到页面页脚下方有一堆空白的问题。我是否只需要让我的内容更长来填充垂直空间？我第一次使用引导程序来创建我的新网站，但我遇到了这个烦人的困境。这是指向违规页面的链接：
http://preview.yourgreatwebsite.com/ecom.php
http://preview.yourgreatwebsite.com/ecom.php
I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug). I've been looking at it for too long!
我敢打赌，有人会看这个并向我展示一些我在 Firebug（或 Firebug 之外）中没有看到的东西。我看了太久了！
回答by Tyler Lazenby
More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too. I had the same issue. An easy way to fix this would be to add the following code inside one of your stylesheets.
如果您正在使用引导程序页面中的粘性页脚模板，则很有可能您正在处理文本下方的边距，该页边距将页脚 div 内的文本进一步向上推，因此也将其父元素向上推。我遇到过同样的问题。解决此问题的一种简单方法是在其中一个样式表中添加以下代码。
.footer p { // Selects text inside a <p> tag that is inside a .footer <div>
margin-bottom: 0; // removes default <p> tag margin from the bottom
}
回答by Fares M.
Add some bottom padding (exactly the height of your footer) to the footer's parent element which is bodyin your case:
将一些底部填充（恰好是页脚的高度）添加到页脚的父元素中，这body在您的情况下：
body{
....
padding-bottom:70px;// You can adjust it
}
and make your footer's position absolute
并使您的页脚位置 absolute
.footer-main {
background: #81ccfb;
padding: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
回答by Justin Breiland
You could use flexbox to fix the layout.
您可以使用 flexbox 来修复布局。
Css
css
body{
display:flex;
flex-direction: column;
}
.navbar {
order:1;
flex-shrink:1;
}
.headerstrip {
order:2;
flex-shrink:1;
}
.container {
order:3;
flex-grow: 5;
}
.footer-main {
order: 4;
flex-shrink: 1;
}
回答by Nuthman
Simply remove the default Bootstrap padding from the bottom of the page:
只需从页面底部删除默认的 Bootstrap 填充：
body
{
padding-bottom:0;
}
回答by QUB3X
Simply add this to your footerclass (in your case: .footer-main):
只需将此添加到您的footer课程中（在您的情况下：）.footer-main：
position: absolute;
bottom: 0;
Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.
快速解释：它会将您的页脚设置为浮动块，其位置不依赖于其他元素，然后它将页脚粘贴到页面底部。
