Bootstrap, make row fill remaining screen space

Question

I'm trying to make a site where the header must have a height of 13% and section1 must fill the rest of the screen perfectly and below that the same case with section2 plus the footer, so if the user scrolls all the way down those last two will fit the screen.

I’ve been on this for a good time, the problem I have is that the container doesn’t grow beyond is height so there’s an overflow with section2 and the footer gets on top of it. I was trying this:

Expanding the parent container with 100% height to account for floated content

but couldn’t make it work.

My original code is a mess so I tried to clean it the best I could to focus on this. 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%;
}

Towrey

Answer 1

I would try adding class fill-height for the div with class container-fluid. That might work. Or it's not the best practice, but try adding it inline. I find sometimes for whatever reason inline will work even if putting it within the css doesn't. Let me know if that doesn't work. Good luck!

Dowdy

Answer 2

Your problem seems to be a footer which won't stay down and creeps up? This is a common issue, there should be several examples to work from with a quick search.

Custard