CODEWITHSUNDEEP
htmlcss
Kaj
Kaj

Reputation: 2503

Need div to fill gap between two divs

Given the following HTML:

<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>

And the following CSS:

#wrapper {
min-height:100%;
position:relative;
}
* {margin:0;padding:0;height:100%;}
#header {
    width:100%;
    height:auto;
    margin-top: 0;
}
#content {
    width:100%;
    height: auto;
    margin:0;
    margin-top:0;
    margin-bottom:0;
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    margin-top: 0;
    margin-bottom: 0;
    bottom:0;
    left:0;
}

There is a gap between the content and the footer's div. How can I set that the content's height must be all the space between the header and the footer?

The footer has to have the 'absolute' position to position is at the bottom of the page.

Upvotes: 3

Views: 5786

Answers (2)

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 3

DiederikEEn
DiederikEEn

Reputation: 743

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!

Upvotes: 0

Related Questions