Height
- src
- utilities
- height.scss
Class list
- .h-1-4
- .h-1-3
- .h-1-2
- .h-2-3
- .h-3-4
- .h-1
- .h-1-4-vh
- .h-1-3-vh
- .h-1-2-vh
- .h-2-3-vh
- .h-3-4-vh
- .h-1-vh
Description
The height utility classes use a fraction notation to indicate their values. For example, .h-1-2 would be equivalent to 1/2 of the parent element height, and .h-3-4 would be equivalent to 3/4 of the parent element height.
Percentages
The regular height utility classes use percentages as the units of their values. For example, .h-1-4 would use 25% of its parent element's height.
Be mindful that height percentages will only work if the parent element has a height value specifically set.
vh Units
The height utility classes ending with -vh use vh units, which can be thought of as a percentage of the viewport height. For example, .h-1-vh would use 100% of the viweport height.