Need Div To Fill Gap Between Two Divs

Given the following HTML:

*header*

*content*

*footer*

Solution 1:

Try using display:table, table-row options

display:table to #wrapper

display:table-row to #header, #content (width and height should be 100% here) and #footer

#wrapper {
    min-height:100%;
    position:relative; 
    display: table; 
    width:100%
}

#header {
    width:100%;
    height:auto;
    margin-top: 0;
    background:#dbfcd6; display: table-row;
}
#content {
    width:100%; display:table-row; background:green; height:100%
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    margin-top: 0;
    margin-bottom: 0;
    bottom:0;
    left:0; background:yellow;
    display: table-row;
}

DEMO

Solution 2:

It is because your footer has a bottom:0 and its position is absolute.This will make it stuck at the bottom.

You should give your content a min height-and max-height like this:

#content {
background-color:red;
width:100%;
min-height:450px;
max-height: auto;
margin:0;
margin-top:0;
margin-bottom:0;

}

Then change the position of the footer to relative

Check out this fiddle : )Check me!

Share