Dave Woods - Freelance Web Design Warwickshire

100% Height Div

CSS layouts don’t have to be complicated but sometimes the things that should be simple and easy to do seem impossible at first.

Within this tutorial, I’ll explain how 100% height can be achieved cross browser, using CSS.

Here’s a very simple example of what this tutorial will create but it can also be used in much more sophisticated and complicated layouts.

I’ll dive straight in with this tutorial and start off with some very simple HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>100% Height Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
</div>
</body>
</html>

This will create a page with a heading and paragraph and should be simple enough so far.

Using CSS to create a 100% height div

Next, we can start adding some styling information to the page with some font styling and basic spacing using CSS.

* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}

Again this should be fairly simple and cause no problems in any of the major browsers.

Now, lets imagine that we want to make the main content fill 700px of the page, including 2px border on each side and add a background colour which takes up 100% of the browser space.

Styling the container should be pretty simple but the 100% height is often a cause for confusion for even experienced designers and developers so here’s how it’s done.

First, we need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.

html, body {
height: 100%;
}

Once this is in place we need to set the height and provide the styling for the container. Applying a 100% height does work for this but you’ll also find that if the content exceeds the viewing area then any scrollable area will no longer show the container. Therefore min-height is required so that it will fill the area if the content is small, but also expand beyond it should the situation arise.

#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}

This solution will work for IE7, Firefox, Opera and Safari but what about the troublesome IE6 browser which doesn’t support min-height?

IE6

It’s a simple solution and one that can be used with most min-height problems. Internet Explorer 6 treats the height value as min-height and will therefore sit nicely at 100% normally but will also behave as all the other browsers do when the content expands out of this area so we can use the star selector hack to target IE6 with the following style.

* html #container {
height: 100%;
}

The Complete Code

And that’s all there is to it. I’ve also included the full code for this example below so feel free to use this within your own work if this solution helps.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}
* html #container {
height: 100%;
}</style>
</head>
<body>
<div id="container">
<h1>100% Height Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
</div>
</body>
</html>

233 comments on “100% Height Div”

  3. David

    Thanks for posting this, i spent a few hours trying to get a 100% height for a website with a frame around the edge of the browser window. Very useful!

  4. Jason M. Bayler

    ok….now put a header footer on it and have 100% of the content of ‘container’ visible without scrolling…..

  5. Pingback: 10 CSS Tips Every Web Developer Should Know « turtle9

  7. John Manoah

    There’s a simple workaround – encapsulate the div’s within another div container and set its overflow-y property to hidden. To each of the divs inside set the padding-bottom to some high value like 4000px and margin-bottom to -4000px. This stretches the div as well a hides it revealing as the content grows. for ex:

  8. Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level

  9. grey

    Thanks!
    For footer area (id=”con”) you may add margin-bottom: -150px; :

    #container {
    min-height: 100%;
    background-color: #DDD;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
    width: 676px;
    margin: 0 auto;
    margin-bottom: -150px;
    }
    * html #container {
    height: 100%;
    }
    #con {
    background-color: red;
    height: 150px
    }

    100% Height Demo
    Lorem ipsum

    Lorem ipsum

  10. Pingback: Dave Woods – Freelance Web Designer UK ยป 100% Height Layout Using CSS - dhansson - dhansson

  22. Daniel

    Great. This worked for me in FF when the 100% height is specified for ‘form’ attribute as well. So, the div can be 100% height if all of its containers are 100%..!!

    Cheers
    Daniel

  25. Simon

    THANKYOU SO MUCH, have been looking for this solution for so long and everyone else seems to make it look over complicated…

  29. Pingback: how to put 100% div height | GeekFreak

  30. Puzbie

    I found your article useful as I had been trying to get hundred percent columns with a header and a footer. However, it didn’t like multiple columns.

    I eventually worked out how to do it, as you can see here:

    http://www.facebookanswers.co.uk/code/fullheight/demo2.htm

    This is the article:

    http://facebookanswers.co.uk/?p=312

    The basic trick is to wrap one of the columns in an absolutely positioned div 100% with the same background. There’s more to it than that but it works without any JS.

    I think its a bit sad that we have to go through so many hoops just to get a fairly simple effect, but there you go…

  32. Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level « satyanarayana's Blog

  33. Pingback: CSS Tips & Tricks « Tech Snippets