css - Div 容器边距不相对于前一个 div

Question

好的，我有一个问题，当浏览器窗口重新调整大小(高度不是宽度)时，一个 div 的边距似乎没有相对于前一个 div 保持不变。这会产生内容重叠的问题，如在宽浏览器中显示的那样。下图显示了它在窄屏幕中如何正常工作，但是在第二张图片中，您可以看到 div 如何根据浏览器变宽(27 英寸 imac)而向上移动。

如果您转到:http://creativeabyss.co.uk/test/当您调整窗口大小时，您可以自己看到这种效果(您可能需要一个大显示器)。我一生都无法弄清楚是什么原因造成的，所以我想知道你们中是否有人可以提供帮助？该代码应该可以在上述链接中找到。

p.s 我已经将一个 div 的背景设置为蓝色，这说明似乎是这个 div 的大小导致了问题...

Answer 1

您的问题是 #OuterMenu 上的固定高度。设置为300px，当你调整浏览器窗口大小时，#OuterMenu里面内容的高度变小了，但是#OuterMenu还是300px 高，这会导致在其下方呈现的内容之前显示一些空白区域。摆脱 #OuterMenu 上的固定高度将解决此问题。它在高分辨率下中断，因为 #OuterMenu 中的内容对于它包含的 div 来说太高了，它只有 300px 高。在这种情况下，看起来 div 下面的内容呈现在 #OuterMenu 内容的顶部，但实际上它是 300px 在 #OuterMenu 上设置的高度限制了 #OuterMenu 在其中呈现其内容所允许的空间。