使用“margin”和/或“padding”的CSS“height：[percentage]”行为

Question

我有一个非常棒的知名度与你分享。我在尝试做一件非常简单的事情时发现了它 - 至少我认为这很简单。

舞台

具有固定高度值的父元素，其中包含任意数量的子元素。我们以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) */
}

...将无法按预期呈现，因为垂直边距 - 以及填充 - 已解析的值基于父级的宽度，而不是父级的高度，如您所料。 This 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. 达到预期目标的更好的可行解决方案是什么？

Answer 1

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

  

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

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

好抓，我从来不知道:)。

Answer 2

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