100% Height Layout Using CSS

January 18th, 2008 · 12:25 pm @ Dave Woods  -  191 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

191 Comments → “100% Height Layout Using CSS”


  1. Ino

    1 year ago

    thx :D


  2. Joy M.

    1 year ago

    I tried your method, and it seemed to work.

    Using Firefox’s Developer Toolbar, I resized it for 800×600 resolution. The divs that I applied min-height: 100%; are no longer at 100% and got smaller as I resized the browser window. The div with the most content seems to keep the min-height style.

    Any suggestions?


  3. Laird Nelson

    1 year ago

    Hello, Dave; great article.

    I had trouble understanding this sentence:

    “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.”

    When I take away the min-height, I observe no such behavior. Or at least I don’t think I do. :-)

    What I observe is that if the content is *smaller* than the viewing area, it sticks to the top, and leaves whitespace below it. There does not appear to be any problem when the content exceeds the viewing area–scrolling works as I would think it should.

    Perhaps I am simply misunderstanding you. Any correction would be greatly appreciated.

    Best,
    Laird


  4. Shekhar

    1 year ago

    I am working with ASP.Net and was having problems with the container height rendering 100% in Firefox 3. Took Steve Payne’s advice and assigned height:100% to form tag. It worked! Thanks!


  5. CSS를 이용한 XHTML1 strict 모드의 height100% « StylinCSS

    1 year ago

    [...] [sample1]


  6. kismert

    1 year ago

    Still no go in Opera 9.63 …


  7. cherry

    1 year ago

    i looked all over the place to fix my 100% height bottom gap problem and i finally fixed it thanks to your tutorial. you rock :)


  8. FC

    1 year ago

    Hi,

    Okay..,so I am trying to implement this. But it works in IE but FF.

    Please take a look at:
    http://freshcapsule.com/test.html

    Any suggestions?

    Thanks!


  9. FC

    1 year ago

    Safari as well…


  10. Chapstick

    1 year ago

    I had a brief problem with this. I always force web-sites I create to show the y-scrollbar, don’t like sites moving about after hyperlink clicks when pages are different lengths, also is part of the CSS2 standard (as far as I’m aware), anyways I usually use:

    CSS compliant browsers:

    body { overflow-y: scroll;}

    IE7:

    body { overflow: visible!important;}

    IE6:

    body { overflow: auto!important;}

    however with this I ended up with two y-scrollbars in IE6, I had to change my css for the site using this to:

    IE6:

    body {overflow-y: auto!important;}

    It took me a little while playing around to get it working, so I just thought I’d let other users know if they wanted to do it too.


  11. James Isles

    1 year ago

    Great article really helped me get my page background to 100%. I knew how to do this with tables but not with CSS.


  12. Andrew Hoffman

    1 year ago

    You are the Man!


  13. SiGi

    1 year ago

    Great solution, I almost give up with DIV’s

    Thx


  14. Pixels

    1 year ago

    Great .. great one.


  15. Ultimate Resource for WebDevs & Designers « Dzign Magazine

    1 year ago

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


  16. Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

    1 year ago

    [...] 100% Height using CSS [...]


  17. Teresa Pelkie

    1 year ago

    This is GREAT! And it works in my FF 3.0.7 – Thanks!!


  18. production6

    1 year ago

    hey, great tip! much appreciated. my question is fairly simple, instead of a BG color I have an image. When I use this fix it shows the entire bg image as opposed to just showing enough to get to the bottom of the browser window. is there something that I can do to fix this?


  19. Charleh

    1 year ago

    You GENIUS, you ******* GENIUS.

    This 100% height div thing was doing my t*ts in!

    Thanks!


  20. Michael

    1 year ago

    What if I want margins apart from the height or top/bottom borders? I cannot get that to work in any way possible, and I’ve tried everything I could think of!


  21. Dinker

    1 year ago

    Incredible! I’ve been hunting for x-browser %height for hours now and this did the trick.


  22. KTd

    1 year ago

    Nice work. This is the best solution I’ve found. Thanks.


  23. sakiv

    1 year ago

    its awesome for others. but it sucks for opera 9.63. How to make it go there?????


  24. James Roberts

    1 year ago

    Thanks Dave,

    Thats works great. You have saved my day!


  25. Victor

    1 year ago

    For those struggling with Opera: Apparently, Opera will apply {height: 100%} to elements of a page but not to a page itself. Use a wrapper div around all other divs (unless you’re using the fixed footer layout, in which the footer div will remain outside the wrapper div).

    #wrapper {height: 100%; margin: 0 auto; text-align: left;}

    Keep the code for #container the same as in the tutorial.

    This works for me in Firefox 3.0.8, Opera 9.64 and IE 8.0.6001.18702 (in and out of compatibility mode). Will test on a few others at work tomorrow.


  26. Brian

    1 year ago

    Just wanted to say thanks. This code worked for me and has ended my long search for this solution.

    Cheers!


  27. Mario

    1 year ago

    Great Explanation. Awsome Tutorial.
    Thanks,


  28. deVashe

    1 year ago

    This example does not work in my Opera :-(


  29. Dinker

    1 year ago

    Good example.


  30. Lindsay

    1 year ago

    Nice work. thanks for that. I have used 100% divs many times in other applications but this time round I came across the issue of no scroll bars and your simple solution fixed it perfectly. good work.


  31. Another Dave

    1 year ago

    Thanks Dave this helped me out. Giving the html tag height:100% did the trick. So simple, so great. Cheers.


  32. Is this still a valid method to set min-height to an element? - DesignersTalk

    1 year ago

    [...] thats should be fine. Dave Woods – Freelance Web Designer UK


  33. Ruben

    1 year ago

    THANK YOU SO MUCH!


  34. nainda

    1 year ago

    I need two div {height:100%} in single html page. Is’t possible?


  35. Patrick LaJuett

    1 year ago

    Very helpful!


  36. Kris

    1 year ago

    …and now the solution including a top and bottom border? :-)

    (without floating two DIVs etc. ;-)

    @nainda

    You mean like:

    Left
    Right

    Fiddling with the proportions/colours etc. is left as an excercise for the reader…


  37. Kris

    1 year ago

    Doh!

    Didn’t realise comments were being parsed/converted!

    [div style="height:100%;float:left;background-color:#ff0000;"]Left[/div]
    [div style="height:100%;background-color:#0000ff;"]Right[/div]


  38. Travis

    1 year ago

    Just wanted to tell you that this has saved me so much time and it’s been the day’s highlight, lol. Thanks!


  39. Dave

    1 year ago

    Thanks Travis :)


  40. Jamie

    1 year ago

    Thanks so much – I have this page bookmarked and come back to it often. It works like a charm every time!


  41. Clarence

    1 year ago

    Hi Dave, I have a problem in making my clients site to be 100% in height. We have used the code from you but its not working. You can see the site at http://clarencedesign.com/projects/molinis/

    Please let us know if you can help.

    Thanks.


  42. Dave

    1 year ago

    Hi Clarence,

    Try putting your footer inside the table. At the moment, you’re setting the table to be 100% height but are then adding the footer on to that.

    As a side point, you really shouldn’t be using tables for layout anyway ;)


  43. Clarence

    1 year ago

    Hi Dave, Thanks for the reply. After we place the footer inside the table, it shows repeating background pattern that fill the browser when we see the page using 1280 x 1024 screen resolution.

    http://clarencedesign.com/projects/molinis/

    How can we set to make the footer will always be on the bottom?

    Thanks.


  44. Dave

    1 year ago

    You can set a footer to be fixed to the bottom of the page using this method:

    http://www.dave-woods.co.uk/index.php/css-fixed-footer/

    I’m not sure what the problem is with your background repeating. If you don’t want a background to repeat you can simply use…

    background-repeat: no-repeat;

    … on the element that you don’t want the image to repeat.

    Hope that helps.


  45. Emma

    11 months ago

    You’re a genius! Saved me hours of faffing – thanks so much!


  46. Frost

    11 months ago

    Now if you you put say another div inside the container, and you want that element div to have a height of 100%… how would you do that? It does not seem to work for any other elements. Any idea’s or have I missed something simple.

    Cheers


  47. Ben

    10 months ago

    Hi Dave,
    Above Laird posted a comment:

    ‘I had trouble understanding this sentence:

    “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.”

    When I take away the min-height, I observe no such behavior. Or at least I don’t think I do.’

    I have to say I can’t work out what that sentence means either! And when I change:
    #container { min-height: 100%; }
    to:
    #container { height: 100%; }

    …it seems to work exactly the same. Any chance you could explain that part it a bit more for the slow people among us?

    Cheers!
    Ben


  48. Dave

    10 months ago

    Hi Ben,

    Basically if the browser window has a side scrollbar, then when you scroll, the element that you’ve applied 100% height to won’t continue into the scrolling area.

    When you’ve got it setup, try reducing the height of your browser so that a scrollbar appears and then see what happens.

    Of course this won’t happen in IE6 as it treats height as min-height anyway so make sure you’re trying it in a browser that supports min-height (Firefox, Chrome, IE7/8, Safari, Opera etc)

    Hope that makes more sense?


  49. Ben

    10 months ago

    Got it.

    So ‘height’ *limits* #container’s height to 100% of the window. Whereas min-height ensures #container remains the same height as the containing content if the window is smaller than the content, and that #container extends to the full window height if the window is *taller* than the content. Clever.

    You sir are a wonder. Thank you.
    B


  50. Dave

    10 months ago

    Hi Ben, Yep you’ve got it… it’s a tricky one to explain but min-height is definitely needed instead of height for it to work properly

« Older Comments
Newer Comments »

Leave a Reply

Categories

Latest Articles

Facebook

Related Links

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