DIV与另一个DIV的问题

Question

尝试在徽标旁边放置菜单（高度= 100％）时遇到问题。

嗯，图片控制DIV（容器）的高度，逻辑上如果在DIV内的右侧放置另一个height: 100%（菜单）DIV（容器），将保持整体的高度，但不会最终发生。

使用100%，auto和inherit

进行了3次尝试

JSFIDDLE

Answer 1

令许多人感到沮丧的是，height是一个特别挑剔的CSS属性。您会看到，如果未明确定义父元素的高度，则为height指定的任何百分比值都会解析为auto（Source here in the Values section）。这就是这里发生的事情。

一个解决方案就是明确设置父级的高度，如下所示：

height: 150px;

不幸的是，如果你不想做这样的事情，你可能需要转向JavaScript解决方案。你知道，getting the height of the parent然后设置孩子的身高等于那个值。

Answer 2

一种可能的纯CSS解决方案是让标题充当table（徽标占据一个单元格，每个菜单项都是自己的单元格）。然后该表将根据最高单元格动态更改，因此如果您将height: 100%放在菜单上，则应将其大小调整为徽标的高度。

请注意，您必须从菜单项中删除float: right，否则无效。

jsFiddle