title: How to make bootstrap grid columns span full height of screen
body: <p>I'm trying to make a responsive "app" screen for a webpage with a <a href="http://materializecss.com/" rel="nofollow">material design</a> library. The app screen is required to fit the page and no more on essentially a tablet screen. I have nested div's within the row elements which use flexbox and work perfectly(distribute space and fit the containing div).</p>
  
  <pre><code>&lt;body&gt;
  
    &lt;nav class="amber darken-4"&gt;&lt;/nav&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
  
  
        &lt;div class="card large amber lighten-4 col l8 m8 s8 left"&gt;
           &lt;div class="card small red accent-3 col m12 user"&gt;
           &lt;/div&gt;&lt;!-- small card user --&gt;
           &lt;div class="card small red accent-3 col m12 cart"&gt;
           &lt;/div&gt;&lt;!-- small card cart --&gt;
  
        &lt;/div&gt;&lt;!-- card col 8 --&gt;
  
  
        &lt;div class="card large amber lighten-4 col l4 m4 s4 right"&gt;
  
  
            &lt;div class="card small red accent-3 col m12 promo"&gt;
            &lt;/div&gt;&lt;!-- small card promo --&gt;
            &lt;div class="card small red accent-3 col m12 keypad"&gt;
            &lt;/div&gt;&lt;!-- small card keypad --&gt;
  
  
        &lt;/div&gt;&lt;!-- card col 4 --&gt;
  
  
      &lt;/div&gt;&lt;!-- row --&gt;
    &lt;/div&gt;&lt;!-- container --&gt;
  
  
    &lt;!--Import jQuery before materialize.js--&gt;
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to make "row" elements(col m8 and col m4) expand and fill the remaining screen space on all screen sizes. 
  Is there a CSS fix to it or can it do with flexbox?</p>