Bootstrap, close the remaining screen space

Question

I'm trying to create a site where the title should be 13% high, and section1 should completely and completely fill the rest of the screen in the same case with section2 plus the footer, so if the user scrolls all the way down the last two will fit the screen.

I have been on this for a good time, the problem is that the container does not grow beyond the height, so theres an overflow with section2, and the footer is on top of it. I tried to do this:

100% parent container extension for floating content account

but could not get it to work.

My source code is a mess, so I tried to clear it so that I could focus on that. It looks like this:

HTML

<header> </header> <div class="container-fluid"> <div id="section1" class="row-fluid fill-height" > <div class="span6" id="red-space"> <!-- STATIC CONTENT --> </div> <div class="span6"> <!-- STATIC CONTENT --> </div> </div> <div id="section2" class="row-fluid fill-height"> <!-- STATIC CONTENT --> </div> </div> 

CSS

 html, body { height: 100%; } body{ background-color:#fafafa; color:#5b5b5b; min-width:0; } header, footer { height: 13%; } .container-fluid { padding: 0; min-height:83%; height: 83%; overflow: hidden; } .fill-height{ height:100%; } 

Answer 1

I would try adding a class fill-height for a div with a container container of the class. It might work. Or this is not the best practice, but try adding it to the line. Sometimes I find myself for some reason when the built-in function will work, even if it is not placed inside css. Let me know if this doesn't work. Good luck

Answer 2

Is your problem a footer that won't stay below and creep up? This is a common problem, from which a few quick search examples should be followed.