html - 页面底部空间不合理

Question

有人可以帮我弄清楚为什么我们的网站底部有很大的空间吗？请参见

http://www.zanadu.cn

我已经玩了一段时间了，无法弄清楚问题出在哪里。

谢谢！

Answer 1

#main_content_container {
    top: -170px;

这就是为什么

您应该重组您的 HTML 以不需要将整个包装器向上移动 170 像素。

Answer 2

问题是为什么你有空间。我得到了答案

在 CSS 中 #main_content_container 的顶部为 -170px；和位置：相对。

将其更改为

position: absolute;
top: 200px;

Answer 3

那是因为您使用的是相对定位。这只会改变元素的显示位置，但它仍然会占用原始位置的空间。

因此，您已经使用相对定位来移动主容器以与菜单重叠，但原始位置（没有相对定位的位置）正好在容器的底部。

Answer 4

当您相对定位某些东西时，为该元素保留的空间仍然存在。所以你将 div 向上移动，但空间仍然保留用于初始状态（定位之前）

一个简单的解决方法是将 main_content_container 顶部位置更改为 margin-top ，如下所示：

#main_content_container {
    margin-top: -170px;
}

这应该让一切正常。请记住在此处删除 top: -170px 规则。