Fill the remaining height with Bootstrap

Question

I have a webpage. My webpage uses Bootstrap version 3. Currently, it looks something like this:

<div class="row"> <div class="col-lg-4"> Stuff here </div> <div class="col-lg-8"> Other stuff here </div> </div> <div class="row"> <div class="col-lg-12"> <div id="fillAvailableSpace"> [Main content goes here] </div> </div> </div> <div class="row"> <div class="col-lg-6"> Other text goes here </div> <div class="col-lg-6 pull-right"> Some text goes here </div> </div> 

I need a div with id "fillAvailableSpace" to fill the available screen height, except for the size of the first row and last row. How to fill the remaining available page height using Bootstrap?

Answer 1

Try something like:

 Element-name { display: inline-flex; height: 100%; }