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 can get the width and height of the window using JavaScript and then use those values to set the height and width of the div, as needed.

Answer 2

maybe

min-height:100%;

what are you trying to do exactly? post some more info and we can help you more

Answer 3

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 4

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

Answer 5

You also need to set html and body to height:100%;

 html,body{height:100%}

Answer 6

You can only meaningfully use height=100% if its containing element's height is definided. Its 100%, of what? no height if defined anywhere. You can use javascript to get the height of the current window (as previously mentioned), or specify a specific height of 800px or whatever value. :D