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

css, height, html

Solution

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.

Problem

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?

Original source