• Published On: 11/04/08
  • Last Edited: 06/05/08
  • Topic: Web
  • Author: Tom Bates

Making a DIV fill the viewport vertically with CSS

How to get a DIV to stretch to fill the window using CSS?

This is a question that gets pondered by every CSS coder at some point. There are plenty of lengthly and convoluted threads on this issue, and the amount of misinformation far outweighs the few straightforward (correct) answers, to the problem. So, in the spirit of spreading the word, here it is, question and answer...

Question:

How do I make a div stretch all the way down the page, regardless of content? Or, how do I make a div fill the viewport vertically?

You may be after a means to create equal height columns. If this is the case, I'd like to point you here - be sure to read the comments on this post, as they contain fixes and tweaks for the method. If, however, your after a single column, centered, that stretches all the way down the page, then read on.

Easiest and best

The best way to overcome this problem is the simplest: fake it. create a slice of background, and repeat it vertically with css on the body. This can give the illusion of a centered column, complete with shadow if one wishes, that stretches neatly all the way to the bottom of the viewport. However, if this method doesn't suit (which sometimes it won't), there is another method

Tiresome and complicated

<body>
<div id="stretch">
<p>Content of any kind</p>
</div>
</body>
html, body {
height: 100%;
}


#stretch {
height: 100%
}

This technique has only limited use however: if the user loads the page within a small browser window, then resizes the window to greater height, the div will not stretch with it. So, adding to this, a little javascript is called for. Note that the code below utilizes the excellent jquery library; now a permanent fixture in all of my web projects.

function tidy() {
if($(document).height() > $('#wrap').height()) {
$('#wrap').height( $(document).height() );
}
}
tidy();
$(window).resize( tidy );

So, we define a function that asks if the document height is great than #wrap (our div). If it is, we resize #wrap to the height of the document. We do this onload, plus every time the window is resized. All this might seem a lot bother to you, and I wholeheartedly agree. Plus things may look messy if javascript is turned off. However, every project has to be judged objectively; I've just completed something where this was the right solution.

Tom Bates
Leave a comment here:




Mountain/Ash

Thanks for the concept - nice and easy.

I just have a few tips for simplifying your code even further:

The .height method also allows you to set the height. Not just get it. So
$('#wrap').css("height",$(document).height());
could just be
$('#wrap').height( $(document).height() );

Also resize takes a function - so you don't need a function to call a function. Instead of
$(window).resize(function(){
tidy();
});
you could just put
$(window).resize( tidy );

Easy.

Posted: 06/08/08
Tom Bates

Good comments Mountain/Ash, I'll change the code as you showed.

Posted: 06/08/08