Google Chrome中奇怪的额外DIV高度

Question

I have two DIVs:

• first one is narrow and is floated left and displays a kind of vertical tab structure.
• second one displays content per selected item in the left DIV

You can see a simplified example here on JSFiddle .

As shown in example, left DIV is usually higher than the right one. That's why the right DIV is vertically shifted down to align it to the bottom of the selected item in the left DIV so the content is always in view when a user selects an item on the left.

Everything works as expected in Firefox and IE but not in Chrome.

Chrome issue

Whenever you select an item in the left DIV that should reposition the right DIV, the whole container of both gets higher even though non of the contained DIVs is as heigh.

What seems to be going on here and what am I doing wrong?

Answer 1

You can hide the extra height that is added by using .container { overflow-y: hidden; } .container { overflow-y: hidden; }

Answer 2

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