Question

这就是这个页脚在Firefox中的外观（它应该是怎样的样子），与Firebug接壤，填满了它的所有高度。

这就是它在Chrome中的外观：

所以有一个ca.在到达底部之前30px高边框。

页脚的（S）CSS代码看起来并不太壮观：

.main-footer {
  background-color: $gray-base;
  color: $white-base;
  font-family: "Avenir";
}

我确实为页脚添加了一个额外的类，它增加了一个170px的高填充顶部，这与另一个div有重叠效果。此代码不会导致30px边框，我已经检查过。

我还试图给body和html 100％的身高。此外，我尝试将页脚的position更改为absolute（它本身会更多地破坏页脚，使用100％width来修复它）并使用最低值来玩，但是页脚似乎完全消失了。

我还尝试将页脚包裹在relative定位的div中，并定位内部div absolute并为其赋予bottom: 0;值。同样的结果，页脚没有完全向下延伸。

最后有点我的想法在这里，很长一段时间。如果您需要更多信息，我会愉快地提供！

修改

有人要求提供特定的屏幕截图：

这是html { background-color: red; }和body { background-color: pink; }

我做了2个额外的截图，显示了webtools的悬停效果。他们不会徘徊在红色部分上，这对我来说很有趣：

Answer 1

我通过在页脚中添加一个特定的高度解决了这个问题，我认为这实际上只是一种解决方法，而不是解决方案。

.main-footer {
  background-color: $gray-base;
  color: $white-base;
  font-family: "Avenir";
  height: 265px;
}

问题是，我无法在codepen.io或jsfiddle或其他任何地方重现这个错误，这就是我努力提供更多信息的原因。但是，我回答了我自己的问题，因为它可能对其他人有帮助。

Answer 2

尝试将此样式添加到正文中：

body {
  padding:0;
  margin:0;
}

通常在chrome上，body元素上会自动添加空格。