How to make a div stretch to 100% of the window height & fixing the background color or image not covering the entire window
14th November 2009
I know, it’s massively long title, but I thought I’d fix too issues with 1 post as they both have the identical solution. The main one is when creating some sites recently they were fairly short designs and bizarrely the CSS background color didn’t fill the window. This was puzzling, but I did find a solution. The other issue is when you’re trying to make a div to stretch to fill a window, it doesn’t like to do it, the solution for this is the same as the other issue.
a) Your background won’t fill the screen even though you’ve set the color in the body via CSS as per below:
b) Can’t get a div or other element to stretch 100% of the browser window.
It’s quite simple, in your CSS put height: 100%; in both the html and body as follows:
Why does it occur?
The reasons these problems occur is because most browsers don’t automatically render the page/body to 100% of the browser windows height. This in turn means that when the background is rendered on the body or the height is set to 100% it will only fill 100% of whatever the body is. This is why setting the html and body’s height to 100% will fix the issue.