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”

  2. Dave Post author

    Hi Justin, Thanks for spotting that. I’d added a touch of padding to the container just before uploading it and overlooked the facts that 100% height + 10px padding on the top and bottom just won’t fit.

    I’ve corrected the tutorial now and the demo that’s linked to so that should now be working in all browsers.

    Sorry about that.

  7. Dave Post author

    @Marcelo – A few people have pulled me up on that one in a few of my other posts but I honestly don’t consider it an issue and here’s why:

    The star selector hack is only supported by IE6 and below and always will be.

    The star is used as a universal selector and therefore the hack is essentially saying that an html tag within any other tag should have this style applied.

    Obviously, as the html tag is always the root, this style shouldn’t get applied to anything. The modern browsers all understand this and ignore it and you’d think that all future releases of browsers will also implement this correctly unless they take a huge step backwards.

    Using conditional comments are fine but do seem a bit overkill for something as simple as this, therefore I only tend to use conditional comments for including an IE5.5 and below CSS file for supplying widths for the broken box model.

    Hope that makes sense and I have nothing against people using conditional comments if they prefer but I do put it down to personal preference rather than one being right over the other.

  10. adolfojp

    Doesn’t quite work in Opera 9.5b… until you refresh the page. If I find out why I’ll let you know.

  11. Jason

    There is a saying about many ways to skin a cat. I’d just apply the min-height fix for ie6. In order to prevent having that second block of css for ie6 you could just add

    height: 100% !important;

    to your first container tag and your problem should be fixed.

  12. Dave Post author

    @adolfojp – I’ll investigate as to why that isn’t working as well. Opera 9.5 is only in beta though but I’ll report back once I have more info.

    @Jason – You should never abuse the !important for hacks as it should only be used for specificity. This won’t help in this situation as height will overrule any min-height and will therefore cause problems with any modern browsers. 😉

  14. Pingback: links for 2008-01-19 « Mandarine

  15. Pingback: Skylog » Blog Archive » links for 2008-01-19

  16. Pingback: links for 2008-01-19, or so says Harry Love

  17. Pingback: nativos2020 | Conseguir alto 100% en nuestros diseños CSS

  18. Pingback: Craig Vidler | Weblog » links for 2008-01-19

  19. Pingback: warpedvisions.org » Blog Archive » HOWTO: 100% height using CSS

  20. Pingback: links for 2008-01-19 « toonz

  21. Pingback: robglazebrook.com » Blog Archive » Daily Links for January 19

  23. Jermayn Parker

    I personally agree and think that the *html should be used before and instead of the !important.

    imo !important is the dirty and messy way of doing it!

    Good simple tip Dave 🙂

  24. Pingback: Derlediğim CSS ve Javascript Örnekleri - katodivaihe

  25. Pingback: links for 2008-01-21 - RERIC.COM

  26. Pingback: Espansione <div> - AlterVista Forum

  27. Pingback: Espansione <div> - AlterVista Forum

  28. Pingback: Dave Woods - HTML, CSS, Web Design » CSS Faux Columns

  29. Howard

    I think the danger of using CSS hacks vs. IE conditional comments is this:

    – imagine a future browser that preprocesses CSS before applying it
    – imagine that the browser’s processing rules for CSS are like those for XML – it’s either well-formed and valid, or it’s disregarded.

    where would that leave your “IE6-only” hacks?

  30. Dave Post author

    Hi Howard, the star selector hack is perfectly valid and passes validation so there’s no danger of that happening 😉

    The hack is only the same as telling a browser to apply a style to an element that doesn’t actually exist within your page. Perfectly valid due to the cascading nature of stylesheets but just won’t be applied to browsers that process CSS2.1 correctly

    IE6 has a little bug that thinks for some reason the html tag can exist inside another tag and that’s the reason why this hack only works for IE6 and below.

    I agree, there’s plenty of hacks that are dangerous but this one is completely safe to use.

  31. Vincent

    Dear Dave,

    It works perfectly. Only is my page now exceeding on the bottom, giving a y-scrollbar. 🙁
    How to fix this?

    Vincent

  32. Dave Post author

    Hi Vincent, this will happen if you give a padding, margin or border on the top or bottom of the container that you’re trying to stretch to the 100% height.

    You can use negative margin’s to snap things back into place but usually the easier solution is to apply the padding/margin/border to a nested element.

    Please feel free to drop me an email with some sample code that you have or with a URL if you have this online and I’ll be happy to take a look for you.

  34. Pingback: WebGyver - Tools and Resources for Successful Web Design, Web Development, Web Applications and Web Business Marketing

  35. Pingback: Dave Woods - HTML, CSS, Web Design » CSS Fixed Footer

  36. Steve

    Doesn’t quite work on Opera/9.25 (Windows NT 5.0; U; en)

    If I resize the window height until the vertical scrollbar appears and then increase window height again the container div has a gap between it and the bottom of the page

  37. Dave Post author

    Thanks for pointing that out Steve. It seems to be a bug in Opera 9.25 and only occurs when your resizing the browser window.

    I’ve tested this in Opera 9.5 and the bug seems to have been fixed.

    I’d be interested to know if there is a fix for this although it is only a minor rendering issue that very few people are likely to replicate in practice and therefore it wouldn’t put me off using it especially as the bug doesn’t exist in the next release of Opera.

  38. Colin

    So I was trying to use this to add a faded edge to all 4 sides of a page with some nested divs, and unless I’m doing something wrong there’s a slight bug with this technique.

    You can see my test page here:
    http://nadir-novelties.net/portfolio/index2.htm

    The div tags themselves are defined like this:
    #left {min-height:100%; background:url(images/fade-left.png) repeat-y;}
    #right {min-height:100%; background:url(images/fade-right.png) repeat-y right;}
    #top {min-height:100%; background:url(images/fade-top.png) repeat-x top fixed;}

    In the body, they’re organized like this:

    Which ever div comes first will set to 100%, the following 2 won’t. The same is true for using inherit and height.

    Am I missing something or does this tag not work in this instance?

    I’ve tested it in IE7 and Firefox 2.0 on windows.

    Thanks.

  43. Pingback: Nathan Peretic’s Blog » Blog Archive » PNC Ideas Launched

  44. gorag

    This is great, so simple – is it easy to modify so that you can have a 100% width banner div at the top and then have this beneath to take up the rest of the room, hope that makes sense?!
    Cheers,
    steve.

  45. Dave Post author

    It would need a little modifying but yes it’s certainly possible. I’ll add it to my list of tutorials to write 🙂

  47. No porridge for me

    Any time I ever add height: 100% to the html element, I always get vertical scrollbars in firefox. The simplest layouts even.

    I still use a wrapper table for layout as it works right off, no fussing around. CSS is absolutely awful at layout. It is fragile, side-effect ridden, and buggy in almost all browsers, and really, who has the time? A dynamic template for your table and there you go, no repeated code.

    Ultimately, I find CSS great for style, abysmal for layout. It just isn’t worth the trouble when there is a perfect solution in a single wrapper table. Semantic? Who cares? I’d rather go home at 5 o’clock myself.

  48. Dave Post author

    CSS Layouts are not fragile if you understand them correctly. If you’d followed this tutorial then you wouldn’t get scrollbars in Firefox, maybe if you can put an example together then I could show you where you’re going wrong (I expect your using 100% height plus a margin/padding/border which obviously won’t fit.

    You want to go home by 5pm but what happens if your boss/client says that the padding on all the pages looks a little too big? Can you make the navigation 50px wider? etc. With CSS a few tweaks in the code and your done which I’d personally much rather do than trawling through 100’s of pages making the changes individually.

    I’ve been around long enough to have worked with table based layouts for a number of years and believe me, completely understand your frustration and making the switch as it does require a completely different mindset. However, having had the experience of working with both table based and CSS based layouts I’d definitely recommend that you persevere as the benefits of CSS layouts far out weigh the negatives.

  49. Pingback: CSS Ninjitsu Links | dBlogIt by Dustin Boston

  50. Pingback: » Dave Woods - HTML, CSS, Web Design » 100% Height Layout Using CSS Webcreatives