Use-Cases of this code snippet
- Know how to set the height of an element to full height of the window viewport using CSS.
- Know about the vh CSS unit.
The height of an element can be set to the same height as that of the window viewport by setting its CSS height property in vh units.
Making the height of a container element same as that of the browser window is useful in cases where there is a "hero" content to be presented — slider, image, video etc at the top of the page. It is one of the most common modern designs applied to webpages.
Setting the height of a <div> to 100% of the browser window can easily be done using the vh CSS unit. When this unit is used, height is calculated relative to the height of the browser viewport. The viewport represents the part of the window excluding its navigation and menu bars.
1vh represents 1% of the height of the browser viewport. To set it to full or 100% of the viewport height, the value becomes 100vh.
/* height is set to 100% of the height of window */
#container {
height: 100vh;
}
vh CSS unit is different from percent based units. When percent based values are used, height of the element is set relative to the height of its parent. But vh assures that height is always set relative to the window viewport height regardless of the parent's height.