title: Twitter Bootstrap - Make row take up the remaining height
body: <p>Before people mark this question as duplicate, let me tell everyone I have tried all the suggestions that were given before in SO, especially <code>display: table</code>. That does not work with Bootstrap.</p>
  
  <p>What I want to achieve is the following-:</p>
  
  <pre><code>---------------------
  |      Nav Bar      |
  |-------------------|
  |      |Body |      |
  |      |     |      |
  |______|_____|______|
  |      |     |      |
  |      |     |      |
  |______|_____|______|   
  </code></pre>
  
  <p>The navbar must be on top. The remaining portion of the body must have 6 divs each div taking up 4 columns. </p>
  
  <p>The body portion's height must be set to the remaining height, since the navbar will change according to resize.</p>
  
  <p><strong>I am avoiding the flexbox solution because of browser compatibly. And would prefer an only CSS solution.</strong></p>
  
  <p>This is the code I am using-:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Admin&lt;/title&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;style&gt;
          html,
          body {
              height: 100%;
              padding: 0px;
              margin: 0px;
          }
  
          .first_wrapper {
              padding: 0px;
              margin: 0px;
          }
  
          .navbar {
              margin: 0px;
          }
      &lt;/style&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container-fluid first_wrapper"&gt;
          &lt;!-- Navbar start --&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#"&gt;Admin Page&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;!-- Navbar end --&gt;
      &lt;/div&gt;
      &lt;!-- Second Container --&gt;
      &lt;div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;"&gt;
          &lt;div class="row" style="height:100%;width:100%;padding:0px;margin:0px;"&gt;
              &lt;div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:red;"&gt;&lt;/div&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:green;"&gt;&lt;/div&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:pink;"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" style="height:50%;width:100%;padding:0px;margin:0px;"&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:green;"&gt;&lt;/div&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:red;"&gt;&lt;/div&gt;
                  &lt;div class="col-lg-4" style="height:100%;background-color:blue;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anything after the comment "Second Container" needs to occupy the height dynamically.</p>