title: Positioning issue with border box sizing using padding by percentage
body: <p>I have problem aligning my div with box-sizing:border-box when I start to use padding by percentage, the position of the box will not match the percentage of the positions.</p>
  <p>Here's the code, paste it to any html file to view it:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Testing&lt;/title&gt;
      &lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
          body{
              width:100%;
              height:100%;
              background-color: blue;
              overflow:none;
              padding:0;
              margin:0;
          }
          #box{
              padding-top:50%;
              width:100%;
              height:100%;
              background-color:blue;    
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;        
          }
  
          #light{
              width:100%;
              background-color:yellow;                    
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='box'&gt;
          &lt;div id='light'&gt;
              halo world
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The yellow div will positioned near to bottom, while I set my padding percentage to 50%. Is this a bug or I got the concept of border-box wrongly, which append the padding together with the width and height.</p>
  <p>Tested on both chrome and firefox.</p>
  <h1>Edit</h1>
  <p>Suggested by @Claude Grecea Tried with something simpler with no body height and fixed div height by pixel. But, the box still thrown to far below, if I put padding-top:50%.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Testing&lt;/title&gt;
      &lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
          .box{
              height:1000px;
              padding-top:50%;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box; 
              background-color:#C1C1C1;           
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;box&quot;&gt;
          halo world
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>