页面上不合理的底部空间

Question

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

http://www.zanadu.cn

我已经玩了一段时间了，无法弄清问题是什么。

谢谢！

Answer 1

#main_content_container {
    top: -170px;

这就是为什么

你应该重构你的HTML，不需要将整个包装器向上移动170px。

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;
}

这应该可以使一切顺利。请记住在此处删除顶部：-170px规则。