html - 另一个 DIV 的 DIV 问题

Question

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

好吧，图像控制（容器）的高度DIV，从逻辑上讲，如果在该（容器）的右侧放置另一个DIV（菜单），将保持高度，但最终不会发生。height: 100%DIV

3 次尝试，100%使用auto和inherit

JSFIDDLE

Answer 1

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

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

height: 150px;

不幸的是，如果您不想做这样的事情，您可能需要求助于 JavaScript 解决方案。您知道，获取父母的高度，然后将孩子的高度设置为等于该值。

Answer 2

一个可能的纯 CSS 解决方案是让标题充当一个table（徽标占据一个单元格，每个菜单项都有自己的单元格）。然后表格会根据最高的单元格动态变化，所以如果你把菜单放在height: 100%菜单上，它们的大小应该与徽标的高度一致。

请注意，您必须float: right从菜单项中删除，否则将无法正常工作。

jsFiddle