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. amit negi

    hi dave:

    i have problem using 100% layout when the content is comming in body it overlapped to the footer my container is position relative and my footer is position relative and i have assigned a nagitive margin value to my footer

  2. Deejson

    I’ve found this solution all over the web, but it still doesn’t solve a nagging issue I’m having, which is to have the divs nested inside the 100% height “container” also fill vertically when they don’t have content.

    As far as I can tell they only fill when you use height:100% on the container. As soon as you change it to min-height:100%, the children divs no longer calculate their height and end up as though you have no 100% height attribute on them. Sure the container still fills vertically, but how to get the children to follow suit?

    I’ve got a student website where I’ve tried to do this layout and outlined the problem here: http://edison.seattlecentral.edu/~jmohr001/

    Is it possible? I’ve been working on every solution I’ve come across on the internet, and there doesn’t appear to be a way without using javascript or something. I’d like to find a pure HTML/CSS solution to this.

  3. matiss

    and how do I set internal div elements to 100%? for example I have background, header, body element and footer. Footer must be bottom of browser, height setting to 80 px, header – top of browser, height setting – 150 px and leaved empty field – body – with remaining unfilled setting of height.

  4. Karen

    Hi there,

    This may be a stupid question but will your code work on all elements within a box? For example, if I wanted to create a site which was essentially a box design with content within it and I wanted everything to resize to 100% of the browser size so that each user gets to see it the same way essentially is this possible – i.e will all the text, images and navigation resize accordingly?

  5. QuHno

    2 Opera 10 workarounds until it is fixed.

    Don’t use the margin shorthand or apply:

    #container {

    border-bottom: 0px solid black;
    }

  6. Brody

    Thanks Dave! This helped a ton with my newest Drupal endeavor. Looked around through a lot of tutorials to fix this, you rock!

  7. jamesbb

    thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you and thank you again. This problem has been bugging me for about month and that tut has really helped out loads.

    Legend.

  8. brett gardner

    I having the same problem I just dont know where I should insert the [ html, body { height: 100%; }

    It works fine when it plays and checks in dreamweaver and flash browsers.

    any help would be appericated , after you enter the site when the home page comes up there should be a pic of Maysa and here name its just black. thank you

  9. Dave Woods Post author

    Hi Brett, would you be able to put the complete code online somewhere so that I can take a look please?

  10. Adrian

    Well, I don’t know about you, but the html,body {height:100%} fix does not work for me, at all! I tried min-height:100%; also, on my container div. Fails in Chrome & Firefox, as far as I tested. So, there’s a REAL fix that works cross-browser or just workarounds for simple layouts?

    Thanks

  11. Dave Woods Post author

    Hi Adrian, do you have an example. Don’t forget that the parent of the element which you’re trying to give 100% height to must have a height applied.

    If you’re after a solution for something a little more complex then you might try considering faking the appearance of 100% height by using something like this: https://dave-woods.co.uk/index.php/css-faux-columns/

  12. Enoch

    I am having a real pain with my 100% divs as follows:

    In all browsers it will fill 100% of viewable area.
    BUT
    IF the window starts where content causes scrollbars to occur naturally –
    using them to scroll down and view the underlying area will not take the
    100 percent div with it.

    Kind of hard to explain but picture a dark background with a centered white div stretching 100% with content that extends beyond the browser viewport.

    Now when you use the scroll bar to go move down the centered white div stays where it started but and the contend is show with the dark background.
    If I resize the browser window by grabbing a corner and dragging – it will update and pain 100% centered white…
    this happens in ff, chrome, ie

    any thoughts?
    thanks,
    Enoch

  13. Enoch

    Bleh sorry for the typos it’s late…
    trying it again without them
    I am having a real pain with my 100% divs as follows:

    In all browsers it will fill 100% of viewable area.
    BUT
    IF the window starts where content causes scrollbars to occur naturally –
    using them to scroll down and view the underlying area will not take the
    100 percent div with it.

    Kind of hard to explain but picture a dark background with a centered white div stretching 100%. The content extends beyond the browser viewport – which causes vertical scroll bars to appear.

    Now when you use the scroll bar to go move down the bottom of the centered white div stays where it started. The content continues on with the dark background.
    If I resize the browser window by grabbing a corner and dragging – it will update and paint the 100% centered white div …

    this happens in ff, chrome, ie

    any thoughts?
    thanks,
    Enoch

  14. King

    Great tutorial Dave but I’m having the same problem as Enoch. It seems the container body (where I have a background colour applied) does not stretch to the bottom when you resize the browser window, and cuts the colour short as it only applies the 100% height to the browser window height, anything underneath is cut short. I have floating content that requires this background to be seen. I’ve tried applying min-height to no avail.

    Thanks

  15. Dave Woods Post author

    Hi, if you’re looking for the body to have 100% height then you need to approach it slightly differently:

    html { height: 100%; }
    body { min-height: 100%; }
    * html body ( height: 100%;} /*for IE6*/

    Hope that helps.

  16. Enoch

    Thanks… I had come up with a solution which fixed everthing by putting

    min-height: 100%;
    display: table;

    in the div class I wanted to have always 100% height

    When I get out of crunch time with this project I will check out your fix Dave. Thanks and cheers.

  17. Dave Woods Post author

    Hi Enoch, that should work fine for modern standards compliant browsers that support display: table; but I think you’ll find that older versions of IE are a little buggy using that method.

  18. King

    Thanks Dave, but it didn’t solve the problem. Everything is viewed properly when the browser window is enlarged but as soon as I resize the browser window, the 100% minheight seems to be dictated by the browser window height. So if I scroll down to the content, the background is not there, it stops where the scroll starts. I thought about using overflow scroll somewhere, or just make the entire body background the same colour.

    I’m not even a web designer but I’ve been handed this job as I’m the one with the most experience in the area and our clients are not paying enough to get a web designer on it. This is doing my head in! 🙂

    Thanks for trying to help though,
    King

  19. King

    Dave is a legend. I originally had height:100% and min-height:100% in the same div one of which overwrote the other rule. So now it works. Dave also suggested the overflow:hidden rule which helped clear any floaters. So this 100% height technique works.

    Cheers for the help Dave!

  20. Brian McQuay

    I’ve been developing sites for years and this was one of those issues that I’ve always had to hack to get working. The secret I was missing was the html, body {min-height: 100% }. Thanks Dave! You have saved me many hours hacking together fixed heights for pages that are smaller than 100% of the screen size.

  21. Dave Woods Post author

    Hi Brian, It’s something that does cause problems for a lot of people so I’m glad it helped you out. 🙂

  22. Pingback: TG Developer » 47 CSS Tips & Tricks To Take Your Site To The Next Level

  23. Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level | CSS | instantShift

  24. Ash

    Hi Dave,

    I’m just starting out on my first few projects and have found this tutorial really useful. Thanks a lot for sharing the knowledge!!

    Ash

  25. Pingback: Tutoriales |    Tutorial CSS – Div con alto al 100% | Tolkos

  26. Isaac

    I’m having the same problem as many others up there, and no fix seems to help. I have two columns. The left column is thin and has a green background. The right column has far more content than the left column. When I load the page in Firefox, IE, Safari, or Chrome, the left column extends to the bottom of the page, until I scroll, then it ends.

    I think I’ve tried every possible combination of min-height and height in all sorts of different ways, and nothing works.

    html {height: 100%;}

    body {height:100%;}

    #container {
    height: 100%;
    width: 997px;
    margin: auto;
    }

    #left_bar {
    background-color: #22bcb9;
    height: 100%;
    width: 227px;
    float: left;
    }

    #main_content {
    width: 730px;
    float: right;
    padding: 0px 20px 10px 20px;
    }

    Any advice?

  27. Isaac

    Hi Dave,

    Thank you so much, this did work. I still don’t understand why the other method doesn’t, but hey, that’s why they’re making CSS3, right?

    Anyways, thanks again for the help. This has always been a constant struggle for me and you really helped fix it. Also really impressed with how fast you replied to help a random stranger!

  28. Dave Woods Post author

    Hi Isaac, No problem… unfortunately that’s not really how CSS works and there is no easy way to get equal column height (without using tables) that is supported in all browsers at the moment.

    The closest thing we’ve got at the moment is the display: table; values but even then older versions of IE will cause problems so the only solution that works in all browser including IE6 is faux columns at the moment.

    CSS3 will obviously make this much easier once IE has caught up.

    Not problem with helping out. If it was something that took up a lot of my time then I’d usually take it on as paid work but to simply point you in the direction of one of my other articles in no trouble at all 🙂

  29. MaraXus

    I have a problem with this:
    #pasek_lewo {
    margin-left: 20px;
    height: 100%;
    width: 280px;
    background-image: url(../images/tlo_left_dwn.jpg);
    background-repeat: repeat-y;
    position: absolute;
    }
    When the text is long and there is a scrollbar, this div ends to early.
    Here is the page: http://www.bunker.pl/dostep/

    Sorry for my english, i hope you’ll understand what i mean 🙂

  30. MaraXus

    Hmm, something is wrong, now it ends when the text ends, what i’m doing wrong?

    http//www.bunker.pl/dostep/

  31. Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level « Tech-Creative Blog

  32. darell

    any solution for this? i want to have a 100% height if the contents is too short. fit in browser view area. no scrollbar. hoping to get solution for this. thank you in advance!

    TEST

    html, body {
    height: 100%;
    }

    #wrapper {
    background-color: #C90;
    height: 100%;
    }

    #header {
    background-color: #F00;
    height: 200px;
    }

    #contents {
    background-color: #09F;
    height: 100%;
    }

    #footer {
    background-color: #006;
    height: 50px;
    }

    header
    contents
    footer

  33. T. Krishna Chaitanya

    Lol!!!! that was great, thanks a lotttt. Actually I was being searching for this from many days. I dint know the problem is with height=100%, I thought it was some thing else, it worked fine in FF, Chrome except IE(stupid browser i thnk so). At last I came to know the problem is with height=100%. Thank you dude, you saved the day.

  34. Vladimirok

    I found bug in Opera. DIV is not use 100% at start. To fix this, plese use in CSS: html { position: relative; }

    Thank you!