css - div 容器边距没有保持相对于前一个 div

Question

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

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

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

Answer 1

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