Google Chrome中奇怪的额外DIV高度

Question

我有两个DIV：

• 第一个是狭窄的，向左浮动并显示一种垂直标签结构。
• 第二个显示左侧DIV中所选项目的内容

您可以看到简化示例here on JSFiddle。

如示例所示，左侧DIV通常高于右侧。这就是为什么右侧DIV垂直向下移动以使其与左侧DIV中所选项目的底部对齐，因此当用户选择左侧的项目时，内容始终在视图中。

在Firefox和IE中，一切都按预期工作，但在Chrome中没有。

Chrome问题

每当你在左侧DIV中选择一个应该重新定位右侧DIV的项目时，即使所包含的DIV中没有一个是高度，两者的整个容器也会变高。

这里似乎发生了什么，我做错了什么？

Answer 1

您可以隐藏使用.container { overflow-y: hidden; }

添加的额外高度

Answer 2

将右侧div容器设置为position：absolute（即右侧和左侧容器的高度相同，设置宽度为您自己的容器）