100% Height Layout Using CSS

January 18th, 2008 · 12:25 pm @   -  221 Comments

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.

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>

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • DZone
  • Reddit
  • StumbleUpon
  • Twitter

221 Comments → “100% Height Layout Using CSS”


  1. Justin George

    4 years ago

    That’s supposed to be 100% height with no scroll bars, right? Not working in Firefox 3 Beta 2, there’s about 50 pixels of scroll to it.


  2. Dave

    4 years ago

    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.


  3. tony petruzzi

    4 years ago

    you sir… are a genius


  4. Cornelius

    4 years ago

    This looks so simple. I’m shocked. I hate using IE6 hacks but this one seems minor enough that it’s worth it. Thank you!


  5. Marcelo Wolfgang

    4 years ago

    This is nice, but you should avoid the IE hack using IE’s conditional comments.


  6. Kerry

    4 years ago

    …finally I get it. Thank you for such a clear and concise explanation.


  7. Dave

    4 years ago

    @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.


  8. ernest leitch

    4 years ago

    I’ve been looking for something like this for a very long time.
    Thanks for the great article!


  9. Larz

    4 years ago

    Thanks Dave, this is brilliant.


  10. adolfojp

    4 years ago

    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

    4 years ago

    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

    4 years ago

    @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. ;)


  13. Braintrove.com

    4 years ago

    Thanks. Many people struggle with this.


  14. links for 2008-01-19 « Mandarine

    4 years ago

    [...] 100% Height Layout Using CSS (tags: css html layout webdesign) No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]


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

    4 years ago

    [...] 100% Height Layout Using CSS (tags: css) [...]


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

    4 years ago

    [...] 100% Height Layout Using CSS (tags: css) Tags: Found Objects [...]


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

    4 years ago

    [...] Enlace: 100% Height Layout Using CSS [...]


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

    4 years ago

    [...] 100% Height Layout Using CSS by Dave Woods. Cross-browser CSS height layout trick. (tags: css layout web design) This entry was written by Craig and posted on January 19, 2008 at 6:18 pm and filed under Bookmarks. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2008-01-15 [...]


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

    4 years ago

    [...] 19th, 2008 in Links A 100% height Layout Using CSS by Dave Woods, useful for forcing columns to fill the browser [...]


  20. links for 2008-01-19 « toonz

    4 years ago

    [...] Dave Woods – HTML, CSS, Web Design » 100% Height Layout Using CSS (tags: css layout height html) [...]


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

    4 years ago

    [...] Dave Woods – HTML, CSS, Web Design » 100% Height Layout Using CSS This is a useful trick for getting a container to fill a minimum of 100% of the screen regardless of the amount of content. [...]


  22. Guido

    4 years ago

    Nice! Thank you, Dave.


  23. Jermayn Parker

    4 years ago

    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. Derlediğim CSS ve Javascript Örnekleri - katodivaihe

    4 years ago

    [...] Bir 100% Height Layout Using CSS [...]


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

    4 years ago

    [...] Dave Woods – HTML, CSS, Web Design ? 100% Height Layout Using CSS (tags: css layout) RSS 2.0 피드를 통해 이 글에 대한 댓글들을 확인하실 수 있습니다. 또한 댓글을 작성하시거나 트랙백을 보내실 수 있습니다. [...]


  26. Espansione <div> - AlterVista Forum

    4 years ago

    [...] no, la soluzione


  27. Espansione <div> - AlterVista Forum

    4 years ago

    [...] no, la soluzione


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

    4 years ago

    [...] uses the same 100% height method as used within my 100% Height Layout Using CSS Tutorial and is essentially creating a container with a width of 760px, height 100% which is centered within [...]


  29. Howard

    4 years ago

    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

    4 years ago

    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

    4 years ago

    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

    4 years ago

    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.


  33. Vincent

    4 years ago

    I dropped you an e-mail. Let me know what you think.


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

    4 years ago

    [...] If you ever got bogged down about figuring out how to achieve 100% height with CSS — across all standards-compliant browsers and one or two browsers who claim to be standards-compliant — then you’ll appreciate Dave Woods’ recent article. [...]


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

    4 years ago

    [...] going to start off with the code that I used within the 100% Height Layout Using CSS tutorial as this provides the foundations we need for this [...]


  36. Steve

    4 years ago

    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

    4 years ago

    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

    4 years ago

    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.


  39. Michael

    4 years ago

    Hi,
    Thanks allot! I’ve been wanting to know how to do this. Will come in handy for allot of current, as future websites!


  40. Patrick

    4 years ago

    Thank God for you mate. Brilliant. Absolutely brilliant. Cheers.

    Patrick


  41. Dave

    4 years ago

    Hi Colin,

    You could simplify that a little by applying the background to the body and a container.

    Something like this for example…

    http://www.dave-woods.co.uk/wp-content/uploads/2008/02/colin.html

    You’ll also need to think about how you’re going to deal with problem of IE6 not having support for transparent png’s but sure you already have that in hand :)

    Hope that helps.


  42. Matt

    4 years ago

    Thanks for this great tip!!! it helped me a ton.


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

    4 years ago

    [...] The background is full height. This is only the second time I’ve attempted a 100% height layout. Not as complex as the first one (which hasn’t launched yet), but not a brain-dead technique either. See Dave Woods’ explanation. [...]


  44. gorag

    4 years ago

    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

    4 years ago

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


  46. andrew

    4 years ago

    SWEEEEEEEET!!!!! Thanks for this.


  47. No porridge for me

    4 years ago

    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

    4 years ago

    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. CSS Ninjitsu Links | dBlogIt by Dustin Boston

    4 years ago

    [...] 100% Height Layout Using CSS This is a very simple solution to a problem that’s been around for a long time. I’m not sure of any caveats at this time. [...]


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

    4 years ago

    [...] Dave Woods – HTML, CSS, Web Design » 100% Height Layout Using CSS [...]

Newer Comments »

Leave a Reply

Categories

Latest Articles

Facebook

Buy Me a Beer

Welcome

Hi, I'm Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businesses throughout the world.

I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that are designed and delivered to the highest standard.

Latest Comments

Popular Posts