Bootstrap 3, full height container without scroll
<p>I want to make a bootstrap layout with header, sticky footer, and 2 fluid containers. one of which is of fixed height, and the other must take all remaining height. </p>

<p>currently i tried to accomplish this by setting height to 100% for second container, but unfortunately it adds scroll to window. How can I make container2 to fill available height, so it does not add the scroll to window.</p>

<pre><code>&lt;div id="app" class="height100"&gt;
  &lt;div class="height100"&gt;
&lt;div class="navbar navbar-default"&gt;
  NAVBAR
&lt;/div&gt;
&lt;div class="container-fluid container1"&gt;
  CONTAINER 1
&lt;/div&gt;
&lt;div class="container-fluid container2"&gt;
  CONTAINER 2
&lt;/div&gt;
&lt;div class="footer"&gt;
  FOOTER
&lt;/div&gt;
</code></pre>

<p>
</p>

<pre><code>html,
body,
.height100 {
  height: 100%;
}

.navbar {
  margin-bottom: 0px;
  background-color: red;
}

.container1 {
  background-color: yellow;
  height: 105px;
}

.container2 {
  background-color: green;
  height: 100%;
}

.footer {
  bottom: 0;
  background-color: white;
  border-top: #ddd 1px solid;
  padding-top: 5px;
  position: fixed;
  left: 0;
  right: 0;
  -webkit-transform: translateZ(0);
}
</code></pre>

<p><a href="https://jsfiddle.net/shkipper/no83psx3/2/" rel="nofollow">FIDDLE</a></p>

<p>Thank You.</p>