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>
amit negi
4 months ago
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
Deejson
4 months ago
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.
matiss
3 months ago
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.
Karen
3 months ago
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?
Eldarado
3 months ago
Opera 9 – Ok.
Opera 10 – Fail :^(
QuHno
3 months ago
2 Opera 10 workarounds until it is fixed.
Don’t use the margin shorthand or apply:
#container {
…
border-bottom: 0px solid black;
}
Brody
3 months ago
Thanks Dave! This helped a ton with my newest Drupal endeavor. Looked around through a lot of tutorials to fix this, you rock!
Casper
2 months ago
You just might be considered for the Nobel prize.
Thanks for the cool tutorial.
jamesbb
2 months ago
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.
brett gardner
1 month ago
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
Dave Woods
1 month ago
Hi Brett, would you be able to put the complete code online somewhere so that I can take a look please?
dani
1 month ago
“border-bottom: 0px solid black;” hack doesn’t work in Opera 10
any solution?
Adrian
1 month ago
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
Dave Woods
1 month ago
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: http://www.dave-woods.co.uk/index.php/css-faux-columns/
Enoch
4 weeks ago
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
Enoch
4 weeks ago
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
King
4 weeks ago
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
Dave Woods
4 weeks ago
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.
Enoch
4 weeks ago
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.
Dave Woods
4 weeks ago
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.
King
4 weeks ago
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
King
4 weeks ago
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!
Brian McQuay
1 week ago
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.
Dave Woods
1 week ago
Hi Brian, It’s something that does cause problems for a lot of people so I’m glad it helped you out.