Question

虽然我之前在我的身体下面钉了50px的填充物，但我仍然在我的页面上坐在我的页脚下方的一堆空白区域时遇到问题。我是否只需要让我的内容更长，以填补垂直空间？我第一次使用bootstrap来创建我的新网站，而我却陷入了这种恼人的困境。这是指向违规页面的链接：

http://preview.yourgreatwebsite.com/ecom.php

我打赌有人会看这个并向我展示一些我在Firebug（或Firebug之外）没有看到的东西。我一直在看它太久了！

Answer 1

将一些底部填充（正好是页脚的高度）添加到页脚的父元素中，在您的情况下为body：

body{
    ....
    padding-bottom:70px;// You can adjust it 
}

并使你的页脚位置absolute

.footer-main {
     background: #81ccfb;
     padding: 1em;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
}

Answer 2

您可以使用flexbox来修复布局。

的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;
 }

Answer 3

只需从页面底部删除默认的Bootstrap填充：

body
{   
    padding-bottom:0;   
}

Answer 4

如果您正在使用引导程序页面中的粘性页脚模板，那么很可能您正在处理文本下方的边距，该文本会将页脚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
}

Answer 5

如果在chrome dev工具中您看到页脚的主体和页脚的尺寸不同。您可以将负底边添加到主体。这是一个快速修复。

{{1}}

这对我有用，也许可以帮助某人。

Answer 6

嗯，我也遇到了同样的情况。原来我是将元素放入 header 元素中，而不是将它们放入 body 元素中。如果有人遇到同样的问题，请尝试将它们放入概览面板中的 body 标签中。准确得多。

Answer 7

只需将此添加到您的footer课程（在您的情况下：.footer-main）：

position: absolute;
bottom: 0;

快速解释：它会将您的页脚设置为浮动块，该位置不依赖于其他元素，然后它会将页脚粘贴到页面底部。

我的引导页面上的页脚下方的空白区域

7 个答案: