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

Question

我想建立一个UI都是相对基于当前的DOM大小。我通过大量使用百分比来做到这一点。

我想要做的一件事就是使用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

是这样做:)

垂直余量或填充需要父母的宽度作为基准时％用于：http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

Answer 2

margin-top: 20%指定上边距是的宽度的20％的含有元素。我从代码中看到，包含元素的宽度是600px。所以上限为120px。在正确的情况下，只有48 px。这就是他们不相同的原因。