Viewport metrics

• For the properties width and height, we already know px, rem, ... but also viewport metrics do exist
• The viewport refers to the part of the webpage which is actually visible inside the browser window
• Viewport metrics are sometimes very handy in a responsive design

Metrics	example	description
vw	width: 100vw	width of the element is 100% of the width of the viewport
vh	height: 50vh	height of the element is 50% of the height of the viewport
vmax	height: 60vmax	height of the element is 60% of the LARGEST dimension of the viewport (the height in portret mode and the width in landscape mode)
vmin	height: 20vmin	height of the element is 20% of the SMALLEST dimension of the viewport (the width in portret mode and the height in landscape mode)

Example

         <div id="text"> <h1>div#text</h1> </div> <div id="photo"> <img src="https://picsum.photos/id/106/400/600" alt="Flowers"> </div> 
    

         * { padding: 0; margin: 0; box-sizing: border-box; }
 body { font-family: Verdana, Geneva, sans-serif; }
 div { text-align: center; width: 100vw; /* both div tags fill the full viewport */ height: 100vh; line-height: 100vh; /* set the line-height to the viewport height to center te content vertically */ }
 div#text { background: linear-gradient(to right, #BFB493, #898C27); }
 div#photo { background: linear-gradient(to bottom right, #5A98BF, white); }
 div#photo img { vertical-align: middle; /* center the image vertically inside his parent container (the div tag) */ border: 1px solid #000; box-shadow: 0 0 20px rgba(0, 0, 0, .6); height: 80vmin; /* the height of the image is 80% of the SMALLEST dimension */ } 
    

WARNING

• Be careful with viewport metrics when the parent element has some paddings or margins!
• In the example below, the body has a padding of 2rem and the div has a height of 100vh
• You will now see a vertical scroll bar of 2rem (the top padding of the body)

         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur repellat praesentium ipsum sint perferendis tempore itaque quod, voluptatum minus tenetur animi qui natus exercitationem unde. Laboriosam praesentium iste ratione molestiae.</p> </div> 
    

         * { padding: 0; margin: 0; box-sizing: border-box; }
 body { font-family: Verdana, Geneva, sans-serif; background-color: khaki; padding: 2rem; }
 div { height: 100vh; /* height: calc(100vh - 4rem); */ padding: 1rem; }
 div { background: linear-gradient(to right, #d5a393, #8c3727); } 
    

• To fix the layout the browser must calculate (with the calc() method) the height of the div as 100vh minus two times the padding of the body

body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: khaki;
    padding: 2rem;
}
div {
    height: calc(100vh - 4rem);      /* or calc(100vh - 2 * 2rem) */
    padding: 1rem;
}