How to make the background color of CSS cover entire browser window?

Question

How can I make the background color to cover the entire browser screen?

 .top{ background-color:green; color: white; height:1000px; display: flex; flex-direction: column; }

 <div className = "top"> <Header/> <Body /> </div>

I have tried making the height 100%. But it does not work at all. How can I fix it?

Answer 1

Just target the body , see code below.

 body { background-color: black; }

 <div> </div>

Additionally, if you want to use the div you can add 100vh and 100vw ;

 .top { background-color: green; color: white; display: flex; flex-direction: column; width: 100vw; height: 100vh; }

 <div class="top"> <Header/> <Body/> </div>

Answer 2

Apply background-color directly to <html> :

 html, body { background-color: black; }

Answer 3

You can use 100vh. This will make the html element take up the entire height of the users screen. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/length

.top{
    background-color:green;
    color: white;
    height:100vh;
    display: flex;
    flex-direction: column;
}