How Can I Make A Div Adopt The Height Of The Screen?

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

Solution 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.

Solution 2:

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

Solution 3:

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

html,body{height:100%}

Solution 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%;
}

Solution 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.