填充百分比如何工作？

Question

HTML

<div class='wrapper'> 
    <div class='elementContainer'> 
     This line should start halfway down the yellow box 
    </div> 
</div> 

CSS

.wrapper 
{ 
    position: relative; 

    height: 300px; 
    width: 400px; 

    background: lightyellow; 
    border: 1px solid black; 
} 

.elementContainer 
{ 
    position: relative; 
    height: 200px; 
    width: 300px; 

    padding-top: 50%; 

    background: red; 
} 

小提琴例如：http://jsfiddle.net/jakelauer/s2ZXV/

在上面的例子，.elementContainer具有50%填充顶部。这应该根据父元素的高度（.wrapper）计算，这意味着它应该出现在150px。相反，它出现在200px。这是怎么回事？

Answer 1

The specifications解释了原因。

<percentage>
百分比相对于计算所生成的框的包含块的宽度

400 50％200