1. VH: Viewport Height
The VH unit, short for viewport height, is a relative unit representing a percentage of your browser window’s height. For instance, 1vh is equal to 1% of the viewport height. This is extremely useful for creating designs that scale smoothly across different screen sizes. While VH is a popular way to handle the height of your content, it has its limitations.
With that in mind, we’ll start with an example of how to use VH and then move on to alternative methods that offer varying levels of improvement.
Example:
div {
height: 50vh; /* This sets the height of the div to be 50% of the viewport height */
}Practical Use:
Use VH for elements like hero images or sections you want to scale dynamically with the window size.
It could be better, though; there are instances where you may not get the exact look you want, especially on mobile devices. This is where some of the other options we’ll cover in this article can help us get a more consistent result.
2. DVH: Dynamic Viewport Height
DVH, or dynamic viewport height, is a newer unit that adjusts according to changes in the viewport size. It reacts to events like window resizing or device rotation, keeping your layout consistent.
While this flexibility can be incredibly useful, it has its challenges. For example, as elements on the screen come and go, the layout will dynamically resize, leading to undesirable flashes as the layout changes.
Example:
div {
height: 50dvh;
}Practical Use:
DVH is ideal for elements that need to maintain size or position relative to the viewport, even when it changes.
3. SVH: Static Viewport Height
SVH stands for static viewport height, which refers to 100% of the viewport height, irrespective of size. It ensures that an element covers the full height of the viewport, creating a fullscreen effect. SVH differs from DVH in that it assumes that elements like the address bar, etc., are not being displayed and, therefore, removes the auto-resizing issues present in DVH.
In most instances, SVH offers a more consistent approach to handling the height of your content onscreen but may also have some content obscured when additional elements appear onscreen – things like your address bar, etc.
Example:
div {
height: 100svh; /* This sets the div to always occupy the full height of the viewport */
}Practical Use:
SVH is excellent for creating full-screen sections or backgrounds that cover the entire viewport.
4. LVH: Line-height Viewport Height
LVH, or line-height viewport height, allows you to set the line-height property relative to the viewport height. This is particularly useful for vertical text alignment.
Example:
p {
line-height: 10lvh; /* This sets the line height relative to the viewport height */
}Practical Use:
LVH is excellent for controlling text layout, especially in large hero sections or banners where text needs to be vertically aligned.
Conclusion
Grasping the concepts of VH, DVH, SVH, and LVH can significantly enhance your CSS toolkit, enabling you to create responsive and visually appealing web designs.
Remember, the key to mastering web design is practice and experimentation. Use these units to explore new layout possibilities and refine your approach to responsive design. Your journey in CSS has just become more exciting!
For a practical example of using VH (viewport height), check out this tutorial on building a single-page design with scroll snap in Bricks Builder.
