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?

Nissy

Please post your HTML and CSS. – Dowitcher

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.

Iain

Answer 2

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

Dowitcher

This was what I needed but I gave SLaks the answer tag because his came before yours. Thanks! – Nissy

Answer 3

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

 html,body{height:100%}

Gossamer

Answer 4

I had the same issue. Setting the html and body height to 100% didn't work, but when I combined min-height of 100vh and a height of 100% on the div it worked.

html, body {
   height: 100%;
}

div {
   min-height: 100vh; 
   height: 100%;
}

Matherne

Answer 5

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.

Xenocryst

Answer 6

maybe

min-height:100%;

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

Calender

Answer 7

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

Angevin