Google Chrome 中奇怪的额外 DIV 高度

Question

我有两个 DIV：

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

你可以看到一个简化的例子here on JSFiddle。

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

在 Firefox 和 IE 中一切正常，但在 Chrome 中却不行。

Chrome 问题

每当您在左侧 DIV 中选择一个应重新定位右侧 DIV 的项目时，两者的整个容器都会变得更高，即使所包含的 DIV 中没有一个高度相同。

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

Answer 1

您可以隐藏使用.container { overflow-y: hidden; }添加的额外高度

Answer 2

将您的右侧 div 容器设置为位置：绝对（即左右容器的高度相同，并将宽度设置为您自己的）