title: CSS: setting a margin to 10% of the window height
body: <p>I am trying to set an absolutely positioned element's height as 80% and its top and bottom margins as 10% in order to give the element 80% of window height and leave 10% space above and below it as other element's are to appear there. </p>
  
  <p>But as you can see in this fiddle <a href="http://jsfiddle.net/qnLC2/" rel="nofollow">http://jsfiddle.net/qnLC2/</a> , and as mentioned in W3C CSS Box-model spec,  all the margins' widths are actually set as 10% of window width (not height) (try resizing the output screen and making it wider to see the effect as well) .</p>
  
  <p>W3C CSS Box-model spec: </p>
  
  <pre><code>The percentage is calculated with respect to the width of the generated box's
  containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. 
  If the containing block's width depends on this element, then the resulting layout is 
  undefined in CSS 2.1.
  </code></pre>
  
  <p>I wanted to know if there was any CSS only way to resolve this problem.</p>
  
  <p>The jsfiddle code:
  html:</p>
  
  <pre><code> &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
   min-width:20px;    
   min-height:20px;
   background:blue;
   position:absolute; 
   height:80%;
   width: 80%;
   margin:10%;
  }
  body{
   background:red;   
  }
  </code></pre>