CSS-百分比填充与像素填充

Question

我正在尝试构建一个相对全部基于当前DOM大小的UI。 我正在通过大量使用百分比来做到这一点。

我想做的一件事是使用padding-top：％在绝对容器内渲染节点。

％所计算出的大小对我来说完全不可行。 我不确定％是基于哪个数字，但它肯定不是父节点。 但是，在同一dom层次结构中使用固定像素进行填充可以很好地工作。

请参见下面的JS小提琴： http : //jsfiddle.net/AK3eT/

    <div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:20%"></div>
</div>
<div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; left:160px;top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:48px"></div>
</div>

左节点使用％填充，右节点使用固定像素填充。 它们应该相同，但％填充完全关闭。

有任何想法吗？ 我觉得这里缺少基本的东西。

Answer 1

margin-top: 20%指定一个上边距，该边距是包含元素宽度的20％。 我从您的代码中看到，包含元素的宽度为600px。 因此最高边距为120px 48 px 。而在右边的情况下，只有48 px 。 这就是为什么它们不相同的原因。

Answer 2

是的你是 ：）

使用％时，垂直边距或边距以父级的宽度为参考： http : //www.w3.org/TR/CSS2/box.html#padding-properties和http://www.w3.org/TR/CSS2/ box.html＃propdef余裕顶