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

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

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

http://www.georgiancollege.ca/student-success/

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

http://www.georgiancollege.ca/athletics/(健身中心菜单项)

http://www.georgiancollege.ca/sdvadev/(程序菜单项)

谢谢。

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

【问题讨论】:

  • 你的浏览器有这个问题吗?

标签: javascript jquery css drop-down-menu


【解决方案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;
      }
      

      【讨论】: