为什么我在所有 HTML 内容下方都有一个大的空白区域？答案

【问题标题】：Why am I getting a large white space below all HTML content?为什么我在所有 HTML 内容下方都有一个大的空白区域？
【发布时间】：2012-07-26 18:43:14
【问题描述】：

出于某种原因，在此页面上使用了一个巨型下拉菜单，所有内容下方都有一个巨大的空白区域，您可以滚动到页脚之外。你能帮我弄清楚这是怎么回事吗？

我很确定它与巨型下拉菜单有关，因为当您将鼠标悬停在它上面时，空白会消失。（菜单项“合作和职业”是超级大的）

奇怪的是，这两个页面也使用它并且没有问题（其他一些样式在这两个上搞砸了，但这并不影响它，因为我将它们放在与损坏页面相同的主题/样式上并且他们仍然没有 - 他们目前的样式已经损坏，因此其他开发人员可以查看其他内容）

谢谢。

编辑：当您检查元素时，与检查器工具栏的大小相比，空白区域会按比例变大 - 如果有帮助的话。

【问题讨论】：

【解决方案1】：

尝试设置#menu-item-197 {overflow:hidden}

或者干脆#pagenav li {overflow:hidden}

【讨论】：

【解决方案2】：

这可能是因为相对定位。例如，在底部自然结构化的 div 块被强制放置在顶部。在这种情况下，将始终保留 div 块的空间，从而留下空白！！！

【讨论】：

【解决方案3】：

这是因为在 custom.css 你有：

#wrapper {
    min-height: 100%;
    position: relative;
}

去掉min-height: 100%，效果很好。

附：我将页脚更改为没有绝对定位，因为它使水平条出现在浏览器窗口下方，如下所示：

#footer {
    bottom: 0;
    height: 60px;
    width: auto;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 1%;
    text-align: center;
}

【讨论】：