how to Make (get) screen 100% height in css

There are many ways to make the height of your HTML elements to be exactly as the height of the browser screen, regardless of the screen resolution, browser, device, etc. Many of these options use JavaScript to find out the height of the window. But there’s a way to do this with pure CSS only.

What is Viewport-Percentage (or Viewport-Relative) Lengths?

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.

There are a few options you may find useful:

• vh (viewport height)
• vw (viewport width)
• vmin (viewport minimum length)
• vmax (viewport maximum length)

Here’s just a simplified code example of the HTML:

1 2 3 4 5 6 7

<div id="welcome">    your content on screen 1 </div>   <div id="projects">    your content on screen 2 </div>

and here’s the CSS using vh:

div#welcome {

height: 100vh;

background: black;

}

div#projects {

height: 100vh;

background: yellow;

}

Enjoy Comments are welcome !!