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>
pepper
1 year ago
thanks a lot for posting dave, this is very helpful!
itcouple
11 months ago
Many thanks!!
David
11 months ago
Thanks for posting this, i spent a few hours trying to get a 100% height for a website with a frame around the edge of the browser window. Very useful!
Jason M. Bayler
11 months ago
ok….now put a header footer on it and have 100% of the content of ‘container’ visible without scrolling…..
10 CSS Tips Every Web Developer Should Know « turtle9
10 months ago
[...] CSS Reset 2. IE6 CSS Bugs and Fixes Explained 3. Block and Inline Elements Explained 4. 100% Height using CSS 5. CSS Equal Height Columns 6. CSS Fixed Footer 7. CSS Rounded Corners 8. CSS Image Replacement 9. [...]
William Li
9 months ago
You genius! Thanks you just saved a headache
John Manoah
9 months ago
There’s a simple workaround – encapsulate the div’s within another div container and set its overflow-y property to hidden. To each of the divs inside set the padding-bottom to some high value like 4000px and margin-bottom to -4000px. This stretches the div as well a hides it revealing as the content grows. for ex:
47 CSS Tips & Tricks To Take Your Site To The Next Level
8 months ago
[...] 100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100% [...]
grey
7 months ago
Thanks!
For footer area (id=”con”) you may add margin-bottom: -150px; :
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
margin-bottom: -150px;
}
* html #container {
height: 100%;
}
#con {
background-color: red;
height: 150px
}
100% Height Demo
Lorem ipsum
Lorem ipsum
Dave Woods – Freelance Web Designer UK » 100% Height Layout Using CSS - dhansson - dhansson
7 months ago
[...] Dave Woods – Freelance Web Designer UK » 100% Height Layout Using CSS Relaterade inlägg :CSS and round corners: Borders with curvesHow to Use CSS SpritesAperture 2 bjuder på 100-tals nya funktioner – MacWorldNine Techniques for CSS Image Replacement | CSS-TricksFancy Form Design Using CSSBy Blogsdna [...]
CB
5 months ago
You officially rock, I have been trying to do this for days.
Sai
4 months ago
Dave your are really a genius. This is a fantastic solution you offered.
Thank you so much for posting.
100% height lAyOuT MoNkEy
4 months ago
I found a 100% working 100% height layout on a german site: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/
I use that Layout as basic layout. The css commands are also well explained.
Chad Warford
3 months ago
Thanks for the great resource. I have already added this to my code arsenal.
Dr. Fleischer
3 months ago
Needed that ’100%’ in the html tag. Thank you very much, this one made my day!
Duco
3 months ago
Finally! Someone who explained it flawless!
Rick
2 months ago
Nice work.
Thejagat
2 months ago
Great Idea .. many thanks
bird
2 months ago
many thanks ..you’ve helped me out .!!!
parsa
2 months ago
the only thing that i can say after a lot searches in internet, you r born as a perfect web designer.
Website Design Birmingham
1 month ago
Thanks, was trying to find an answer to this for ages
David