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

Question

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

我正在尝试做的一件事是在带有 padding-top:% 的绝对容器内渲染节点。

% 计算的大小对我来说完全不正常。我不确定 % 基于什么数字，但它肯定不是父节点。但是，在同一 dom 层次结构中使用固定像素填充效果很好。

请参阅下面的 JS fiddle : 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。而在右边的情况下它只有 48px。这就是为什么它们不相同。