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”

  1. Mordechai Peller

    It’s worth mentioning that since you’re using tables, the default vertical-align is baseline. I spent a long time trying to debug a layout in which the two columns were starting at different points. The solution was to set “vertical-align:top;”

  3. merc

    ok this is awesome, but one thing and maybe its just eluding me as i have been doing html all day trying to figure this one out, but your code aligns the container in the center of the browser but i do not see anywhere that a horizontal alignment is in the code.

    also dunno how important this is, but if i resize my browser so its really thin, at a certain point the text escapes the container so the text overlaps the gray bgcolor, not that anyone would have their browser resized that thin, but if i were to say use 3 or 4 of these side by side ( columns) and someone shrank their browser would it look messed up?

    and last thing could i put tables and other tags inside? just wondering because atm im using the overflow:hidden in my css, and a seperate css file for a couple of pages that need to scroll

    hope I’m making sense this height thing has been bothering me for days now

  5. Pat

    This is a fantastic little tutorial. Thanks, Dave.

    But I would also like to do what gorag talked about; having a 100% width div banner at the top and this underneath it. I’ve tried it out, but the 100% height div overlaps the top banner and I can’t get it to stop that. If you could write a tutorial for something like this, I would greatly appreciate it.

  7. Cheah Khing

    hi, i tried your codes but it doesn’t work though. 🙁
    i think maybe it only applies to simple div that doesn’t stays beside a floated elements. My case is i got two divs, first is floated left, hence the second 1 i need 100% height, but it doesn’t work in firefox. 🙁
    do let me know if there are any solution available. THANKS. 🙂

  10. Joe

    I am having the same problem as Cheah Khing. When I add a floated left div within the container and use it to store content that fills it up. The container does not go 100% in firefox.

  11. Dave Post author

    Hi Joe and Cheah,

    What you’re describing doesn’t sound possible through this method alone.

    Have a look at my CSS Faux Column tutorial as you’ll probably need to do something like that to achieve what you’re after.

    https://dave-woods.co.uk/?p=154

    Hope that helps.

  12. Ed

    This is great, thank you so much!

    Is there any way to get the contents of the container, such as a table, or a collection of divs, to be vertically aligned to the center? I’ve tried adding “vertical-align: middle;” to different elements in your code but to no avail.

  13. gorag

    try using a container div like this:

    to centre everything on the page, vertical align, I think, will only apply to text within.

  17. TK

    Dave

    Thanks for this. I was wrestling with similar issues a couple months ago and ended up using some Stu Nichols techniques that worked well enough for the application. I’ll have to play with this and add it to my kitbag.

    re vertical alignment — that’s been my grail the last little while and after looking at a number of solutions (many of which have been broken by subsequent browser releases — wish folks would remove their tutorials and explainers when they are no longer valid — and that shows the danger of hacks, you bet) the techniques here are the best I’ve found (but…):

    http://www.pmob.co.uk/pob/hoz-vert-center.htm

  19. Ruud

    Hi Dave,

    For this effect you do not need a IE6 jack at all.

    Try this as your ONLY #container declaration:
    #container {
    background-color: #DDD;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
    width: 676px;
    margin:0 auto;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    }

    And now I’m on it: let’s add a header and a sticky footer too!

    Change your container declaration so it’s like this:

    #container {
    background-color: #DDD;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
    width: 676px;
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    }

    Add these declarations to your CSS:
    #header {
    height:100px;
    background:#999;
    }

    #content {
    padding-bottom:50px; /* bottom padding for footer */
    }

    div#footer {
    position:absolute;
    width:100%;
    height:50px;
    bottom:0; /* stick to bottom */
    background:#999;
    }

    And your HTML:
    Put a header div (#header), a content div (#content) and a footer div (#footer) into your container div; put your existing content (h1 and p’s) in the content div.

    Save all and take a look.

    Example: http://frontwerk.nl/sandbox/dave.html

    Here are some notes:

    Relative positioning
    Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.

    Padding-bottom
    Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.

    @Ed: try this for vertical alignment:

    body {
    margin: 0;
    padding: 0;
    }

    #yourbox {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -100px;
    }

    And your box is sitting perfectly in the middle of the page! Horizontally AND vertically!

    Example: Example: http://frontwerk.nl/sandbox/ed.html

    Of course you can use your own height and width, just make sure that margin-top is the height of #yourbox divided by 2 and minus and margin-left is the width of #yourbox divided by 2 and minus.

    Cheers,
    Ruud.

  20. Michael

    I have a div container with two floated divs side by side. I have set the css for the html and body objects to height:100%. I have set the css for the container div to min-height:100%. I have set the two floated divs as height:100%. I get nothing in IE7 and in FF2 the two floated divs only show the background as high as my html screen size. Maybe I am missing something but the css isn’t working on floating divs inside of a div container.

  21. Dave Post author

    @Ruud – Your initial snippet of code wouldn’t have worked because using height and min-height in the same style will cause min-height to be ignored which will cause problems in modern browsers.

    You’ve obviously realized this and got around this by using !important on height auto which is essentially a hack to get around this problem.

    I’d suggest keeping the hacks separate by using the star selector as it’s much more future proof and I’d personally only use !important for specificity issues when there’s no alternative.

    Thanks for the comments though and the addition of the sticky header and footer works well.

    @Michael – For something like that your best bet would be to use CSS Faux Columns which I’ve explained in another tutorial

    https://dave-woods.co.uk/index.php/css-faux-columns/

    Hope that helps?

  23. moh3

    hello thank you very much for your fix works like a charm been looking for something for weeks

  24. Emma

    Hi

    Thanks for a great tutorial!

    Is it possible to also get a top and bottom border without a vertical-scroll in firefox?

  25. Tim

    Hi Dave

    Great tutorial that has helped me countless times with height issues.

    However, I’m having an issue embedding flash into my layout. The height of the flash seems to be destroying the 100% height. Delete the flash and it’s fixed, add the flash and it breaks.

    Have you came across this issue before and if so how can I fix it?

    Many Thanks

    Tim

  26. Tim

    Nevermind having removed the flash I’ve still got the issue. lack of experimenting on my part I think.

    I’ve still got the issue but I now believe it’s just the fix not working on Firefox 3 as it works fine on IE6 and 7.

    Any ideas?

  28. Dave Post author

    Hi Tim, no problems, we all have those kinds of moments at one time or another and it’s usually something obvious.

  31. Pingback: 50+ Articles to Make You a Better Web Designer | DesignM.ag

  34. ted in pdx

    Thanks for the clear and simple explanation FBO a CSS newbie. On another subject: if there were a textbook example of how to maintain a technical discourse with comity and absent any hint of “posting rage” (even when arguably justified), this should be in it. (So thanks for that tutorial as well.)

  35. Pingback: 50+ Articles to Make You a Better Web Designer | Net Feast

  36. Steve Payne

    In case people are having problems with this working in Firefox with asp.net, remember that it is possible your container might be inside more that html and body tags. Most notably you might need to add the Form tag in the initial height:100%. IE doesn’t seem so bothered, but as is usual FF adheres to the standards better.

    I use the Ruud approach with position:relative and putting the footer div inside the container div. Although I follow Dave’s approach with regard the use of IE6 hack.

    To give confidence to people struggling with complex designs, a typical page on my development has the following divs:

    header,
    three separate main navigational areas,
    main content,
    clear footer,
    external link area (after clear footer),
    footer.

    Additionally, my development employs master pages and these sticky footer methods appear to work fine on the major browsers.

    I am in no way a CSS expert and have just followed the approaches of people like Dave and Ruud. Dave’s articles are the clearest explanations I’ve found. Thank you.

  38. ben

    Dave, that is brilliant I have read so much tosh from other people who really don’t know squat and just add confusion – and this is the nuts.

    Brilliant!

    Also, love the comments – these just no pleasing some people;)

  39. Nathan

    I have been trying to implement this, but run into a problem with Firefox. I get a padding at the top and scroll bar.
    I have included the style code in the index source.
    I dont believe I have any padding/margin/border issues that should cause this.
    What am I missing?
    The page I am working with is
    http://www.northolga.com/
    Thanks

  40. John

    I also get a scrollbar in firefox when html, body is at 100% height, with no margins/padding on a simple layout.

    I’ve read some of the comments above and have to agree that css sucks when it comes to layout. We should not have to get a PHD to design a simple layout.

    Whatever happened to usability? Developers are users too right?

    I get all fired up when I think about the amount of time I waste everytime I hit the refresh button to test a simple css layout. In the end I settle for a compromise, a workaround or Javascript.

    Here’s a link to someone with similar sentiments: http://xrl.in/gr6

    I think it’s great that you have found a solution even with the overly complex and flaky way css is implemented.

    I just wished it worked for me. 😉

  41. Mike M

    Thanks a million. Been trying to figure this out all morning and no one could give a simple answer that just involved the CSS code of

    html, body{
    height: 100%
    }

  42. zawmn

    Hi

    I try put the header, body and footer layout to height 100% page.

    But it is not working at all and also show different in IE and firefox.

    Please check the following code:

    100% Height CSS Layout

    * {
    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%;
    }
    .fullheight{height:100%; width:676px;}
    .mheader{height:35px}
    .msitemap{height:50px;}
    .mfooter{height:35px}

    This is header

    This is site map.

    bodybodybodybodybodybody

    bodybodybodybodybodybody

    This is footer

  45. DJ

    I was making a website with HTML/JS/XML. And main goal was compatibility with IE/FF. Your advice perfectly helped for me. Thanks man.

  46. Ethan

    Just wanted to say thanks – in my entire semester of studying CSS not once did anyone mention that you actually had to set parent styles in the HTML tag, and that solved an awful lot of problems, and this so far is the only place I’ve seen even mention this. Thanks!