How can I make a div adopt the height of the screen?

Question

I tried using

height: 100%

but this makes the div only as high as its contents - it just contains a single word of text.

How can I force the div to use the screen height instead?

Answer 1

You need the body and html elements to have 100% height as well.

Try the following CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

YourDivSelector {
    height: 100%;
}

The margin and padding must be set to 0 to prevent autoscroll in Firefox.

Answer 2

You should set all the containers that contain the div to height:100% as well, including the body and html tags.