div with 100% height

With div design catching up, we end up having issues with the stretching div to the max height. Most of the time this is noticed in the footer section, which has to always stretch to the edge of the browser scroll.

I came across of a browser compatible solution to this problem and thought of sharing it here.

Check the footer section in the image below:

 The red line on the left give away the clue. That particular div is responsible for pushing the Footer down.

I am attaching the HTML here:

<style>
html{
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
body{
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#spacer{
display: block;
height: 95%;
float: left;
width: 2px; /* 1px would be enough this is for display only */
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}

#contentwrap{
display: block;
width: 99%; /* to suit but leave room for spacer */
text-align: center;
padding: 0;
margin: 0;
}

#content{
margin: 0;
padding: 0;
border: 1px solid blue;
}

#footer{
clear: both;
height: 5%;
border-top: 1px solid green;
padding: 0;
margin: 0;
}
</style>
<div id=”spacer”></div>
<div id=”contentwrap”>
<div id=”content”>
<p>Header</p>
</div><!– content –>
</div><!– contentwrap –>
<div id=”footer”>footer</div>

Hope this helps!!