页脚后的空白，仅在 Firefox 和 IE 中答案

【问题标题】：white space after the footer, only in firefox and ie页脚后的空白，仅在 Firefox 和 IE 中
【发布时间】：2013-01-08 18:33:13
【问题描述】：

网站底部页脚后似乎有随机空白，但仅在 IE 和 Firefox 中显示。该网站在 Safari 和 Chrome 中运行良好。当我尝试使用检查元素时，空白似乎不属于任何标签。它似乎与任何页脚标签无关，因为删除它们并没有改变任何东西。网站链接为：http://www.insightdatascience.com。

我查看了大量答案，但似乎没有一个专门适用于我的网站。谢谢！

【问题讨论】：

我现在没有可用的 FF 或 IE，但我在 chrome 中看到的可能与它有关：GET insightdatascience.com/css/normalize.css403（禁止）
我可以得到 CSS 文件的 403 错误。 IE 9 没有显示任何大的空白区域。这听起来像是一个临时缓存问题...
我尝试了 CSS 重置，但没有成功。不知道为什么会出现 403 错误，但似乎没有出现在本地主机上，并且底部仍然显示空白。

标签： html css internet-explorer firefox

【解决方案1】：

我也有类似的问题，仅在 FireFox 上。

我有一个典型的页面布局，上面有顶部窗格和底部窗格等。我用 Grid 设置了它的布局。通过将底部窗格的背景设置为粉红色，我可以看到它覆盖了在页面底部边缘结束的预期区域。但是出现的垂直滚动条允许我在底部窗格下方滚动，从而显示它下面有空白。

我的问题是（由事实引起的）在底部窗格中我只有一个未设置样式的 H3。默认情况下，FireFox 为 H3 元素提供顶部和底部边距，这会导致内容流过底部窗格的底部边缘。

当我将 H3 元素的边距设置为 0px 时，问题就消失了。

所以我想一般要意识到的是，即使你的容器元素（比如我的底部窗格）整齐地结束在页面的末尾，如果它有太多的内容，它可能会溢出并在它下面创建额外的空间.一个通用的解决方案是在这样的元素上设置溢出：隐藏。内容不会自动停留在其容器的边界内。你必须明确防止溢出，如果有一些你不想要的话。

为什么我在 FireFox 上看到了这个问题，而在 Chrome 上却没有？原来 H3 的默认样式在 Chrome 上是不同的，它给了它更少的下边距，所以它没有足够的空间导致溢出。

【讨论】：

【解决方案2】：

我有类似的问题。解决此类问题的更一般的方法是添加：

body {
    overflow: hidden;
}

到您的 css 文件。

【讨论】：

【解决方案3】：

在stylesheetmain.css，你有这个规则：

.fellows #insightpictures .buttons {
    margin: 635px auto;
}

将margin: 635px auto; 更改为margin: 635px auto 0; 以删除底部边距。

【讨论】：