html - Bootstrap 3, full height container without scroll -

i want make bootstrap layout header, sticky footer, , 2 fluid containers. 1 of of fixed height, , other must take remaining height.

currently tried accomplish setting height 100% second container, unfortunately adds scroll window. how can make container2 fill available height, not add scroll window.

<div id="app" class="height100">   <div class="height100"> <div class="navbar navbar-default">   navbar </div> <div class="container-fluid container1">   container 1 </div> <div class="container-fluid container2">   container 2 </div> <div class="footer">   footer </div> 

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); } 

fiddle

thank you.

set overflow hidden .
css

.height100   {   height: 100%;  overflow:hidden;  } 

https://jsfiddle.net/no83psx3/4/