Many people find that even if they set ‘height: 100%’ to a DIV, it will not expand all the way to the bottom of the browser window, but stop right after the content finishes within the DIV.
The solution is actually a very simple one.
For percentages to work properly, the elements parent has to have a defined height. For the DIV in question, the parent is BODY whose parent is HTML.
So, we have to specifically set the heights of these two elements in the CSS like so;
html, body { height: 100%; }
Now, when we set the DIV’’s height to 100% it’s parent will have a height defined, which will allow it to expand to the full height of the browser window.
Simple huh!
10 responses so far ↓
Jeroen Visser // December 7, 2004 at 12:22 pm
Good advice, but remember to use the tantek comment hack to exclude IE5/Mac from the html: { height: 100%; } bit. Otherwise, funny things happen in that browser.
Ruthsarian // December 7, 2004 at 12:23 pm
Just remember to keep an eye on the height of your content. That 100% height becomes 100% of the viewport’s height.
If the content flows beyond 100% height of the viewport, that DIV’s bottom edge will become obvious when a user starts to scroll.
Andy Peatling // December 7, 2004 at 12:23 pm
Some good additions guys thanks.
Dr1nks // December 17, 2004 at 4:14 pm
“Ruthsarian”, or anyone… Does anyone knows way to fix it? I like to have 100% if the content is small of the viewerport, AND if the content is bigger that, it became from top to bottom of the browser window.
thanx
justin // December 17, 2004 at 6:59 pm
is it not better to use something like a 1px background image and repeat it?
body{
background-image: url(images/image.gif)
background-repeat: repeat-y;
}
Thats a method I use. It’s actually quite handy and versitle. It gives the apperance of 100% height and then you can position your divs where the need to be.
Tyler // December 28, 2004 at 9:29 pm
I can’t seem to utilize this on Mac Safari. I am having a hard time finding a way to have height:100% work on this browser. I am not using DIVs, but TABLEs. Any advice?
thinsoldier // January 11, 2005 at 4:57 pm
Tyler, according to the w3c standards you shouldn’t be able to assign a height to a table. Safari is very standards compliant…bla bla bla…. table height won’t work because it shouldn’t work because height is not a valid table attribute (although I wish it was)
StewartG // January 20, 2006 at 7:56 am
Ok, I’m working on a clients site at the moment and they want the site to fit in 100% of the browser, ok that’s fine…
However in the bottom area of the site we have an image, that DOES go below the bottom of the browser window, but I have another overlay image that sits at the bottom (IE bottom: 0px;) that acts as an end to the other image.
Is there a way to have my background image stretch below the bottom of the browser window without the scroll bar appearing?!
If none of this makes sense then sorry, best way I can think of explaining it.
Stew.
Sarah // November 23, 2007 at 6:17 am
Dr1nks,
To get the effect you’re talking about, a simply put a height:auto !important, in the same element and it puts in the min height and stretches to accomodate the extra content if larger than the main height.
Admittedly I haven’t tried that one with % yet but it’s always worked with px height. I always have to do that to compensate for the IE6 misinterpretation of min-height.
bob // January 15, 2008 at 1:35 am
Thanks for the tip. After spending an hour or so working through all the other CSS stuff I was amazed how simple the answer was.
Leave a Comment