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!!

2 thoughts on “div with 100% height

  1. to pepelsbeyСогласен, этот способ круче, особенно понравилось Install Mysql 3.23 using yum, Perl 5.8, and /usr/bin/fortune :)Но 84 шага это многовато, так что лучше уж мой

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s