Question

考虑以下html

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

我给父母一个100px的高度。孩子的身高为100％，填充量为“10％0”。在CSS中：

* {
    box-sizing: border-box;
}
#parent {
    height: 100px ;
}
#child {
    height: 100%;
    padding: 10% 0;
}

或结帐this jsfiddle。无论如何，从上面我可以预期子div的顶部/底部边界为10px（100px的10％）。但它是31.5px。有人可以解释为什么会发生这种情况以及如何实现我的目标吗？

非常感谢！

Answer 1

将使用元素的宽度计算任何百分比值。

Answer 2

％基于元素的宽度而不是高度。

Answer 3

百分比基于宽度：如果这样做，您将获得所需的结果。 <div>也不是自我关闭。

* {
    box-sizing: border-box;
}
#parent {
    height: 100px;
    width : 100px;
    background-color: green;
}
#child {
    height: 100%;
    padding: 10% 0%;
    background-color: blue;
}

请参阅相关问题：How to set the margin or padding as percentage of height of parent container?

css / html：％填充没有意义

3 个答案: