title: How to create two rows that occupy the full viewport height
body: <p>I am using Bootstrap 3 and what to create a layout where it occupies the full viewport both horizontally and vertically.</p>
  
  <p>I have two rows. The first at 60% of the height of the viewport and the second 40% of the viewport. So basically with some ASCII art:</p>
  
  <pre><code> ----------------------------
  |  60% Of View Port Height   |
  |                            | 
   ----------------------------
  |  40% Of View Port Height   | 
   ----------------------------
  </code></pre>
  
  <p>I have looked at various posts on Stack Overflow but cannot find a solution that will work across all devices in a responsive fashion. I would prefer a native Bootstrap 3 solution but other solutions also welcome.</p>