title: How to make div in grid view be of 90% height of page
body: <p>I want to create grid view, where header contains 10% height of the page and body 90%.</p>
  
  <p>I have tried to adjust this, but body part does not grow when element section on right hand scales.</p>
  
  <p>I want to add elements in right panel in responsive manner.</p>
  
  <p>Is there any good way to organize this?</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/karimkhan/q18yzkoz/5/" rel="nofollow">http://jsfiddle.net/karimkhan/q18yzkoz/5/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12" style="background-color:lavender;"&gt;
              &lt;div class="header"&gt;Header Height should be 10% of the page&lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  
      &lt;div class="row" &gt;
          &lt;div class="col-xs-8" style="background-color:lavenderblush; height:100%"&gt;Body, Height should be 90% of th page
          &lt;/div&gt;
          &lt;div class="col-xs-4" style="background-color:lavender;"&gt;
              &lt;!-- 12 repeated rows as below, height should fit in 90% region in responsive manner --&gt;
              &lt;div class="row" &gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item1&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item2&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item3&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item4&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item5&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item6&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item7&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item8&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item9&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item10&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;Item11&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6" style="background-color:lavender;"&gt;
                      &lt;div class="element-box"&gt;item12&lt;/div&gt;
                  &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>