Why does a div not take full height even when height: 100% is set in CSS?

1 month ago 28
ARTICLE AD BOX

I’m working on a simple HTML/CSS layout and trying to make a div take the full height of the screen.

I’ve set height: 100% on the element, but it doesn’t stretch to the full viewport height as expected.

<!DOCTYPE html> <html> <head> <style> .container { height: 100%; background-color: lightblue; } </style> </head> <body> <div class="container"> Content here </div> </body> </html>

Issue

Even though the .container has height: 100%, it does not fill the entire screen height.

What I’ve tried

Setting height: 100% on the div

Removing default margins from the body

Question

Why doesn’t height: 100% work in this case, and what is the correct way to make a div take the full viewport height?

Read Entire Article