0

我有一个很棒的隐身要与你分享。我在尝试做一件非常简单的事情时发现了它——至少我认为它很简单。

舞台

具有固定高度值的父元素，其中包含任意数量的子元素。让我们以 div 为例，从 2 个孩子开始。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

目标

设置子元素的高度和垂直边距以完全匹配父元素的高度，将总高度平均分配给子元素。该解决方案应该可用于任意数量的子元素。当然，可能需要某种计算。

问题

使用基于百分比的高度和边距不起作用。任何类似以下的解决方案...

.parent {
    width: 5em;   /* some fixed width */
    height: 10em; /* some fixed height */
}
.child {
    width: 100%;
    margin-top: 4%;
    height: 44%;  /* let's render 3 gaps of 4% each (on top, middle and bottom) */
}

... 将无法按预期呈现，因为垂直边距 - 以及填充 - 解析的值基于父级的宽度，而不是您可能期望的父级的高度。这个 jsfiddle通过以下测试演示了这种行为：

测试 1

设置 margin-top 和 margin-bottom。孩子的身高设置为100% - @margin-top - @margin-bottom

案例A

父级的高度高于其宽度。由于提到的问题，浏览器在父级的底部呈现了一个间隙。

案例B

父母的高度等于它的宽度。浏览器按预期呈现，因为父级的宽度等于父级的高度并且边距被正确解析：

@parent-width = @parent-height
@base = @parent-width

案例C

父级的高度低于其宽度。由于上述问题，第二个孩子被剪掉了。

测试 2

这个测试用例演示了填充行为，就像测试 1 对边距所做的那样。

测试 3

表明孩子的身高是从父母的身高得到的。如果我们不尝试放置一些边距或填充，浏览器会按预期呈现所有情况。

测试 4

如果您想研究第二个问题的答案，此测试很有用- 见下文

问题

  1. 为什么垂直高度和填充基于父宽度而不是父高度？我在 w3c 规范上找不到任何东西。
  2. 达到预期目标的更好的可行解决方案是什么？
4

2 回答 2

1

今天我偶然发现了同样的问题，我发现新的相对单位vh (CSS 3) 在这种情况下非常有用：它的工作方式类似于百分比，但相对于视口的高度（使用vw表示相对宽度）。如果与视口而不是父项的相对性不是问题，这是一个纯 CSS 解决方案。

于 2013-10-15T21:24:37.700 回答
1

有趣......但我认为问题不在于垂直高度，它们都在我的浏览器上正确显示（高度总是相对于父母的高度），它是填充和边距总是衡量父母的宽度，但经过研究，我发现这个：

在所有情况下，%（百分比）都是有效值，但需要小心使用；这些值计算为父元素宽度的比例，

http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

很好的收获，我从来不知道:)

于 2013-05-01T06:05:32.863 回答