A
V
Height
The Height utility classes are used to assign a fixed or relative height to an element. These classes help manage vertical space and ensure consistent layout structure across your design.
Height in Pixels
The Height in Pixels utility classes are used to apply fixed pixel heights to elements. These classes offer precise control over vertical sizing when rem, %, or vh units are not ideal.
Definition and Usage
Example
| Property | Value |
|---|---|
| Ht1 | height: 1px; |
| Ht16 | height: 16px; |
| Ht100 | height: 100px; |
Note
The range of this property is from 1 to 100.
Height in Percentage
The Height in Percentage utility classes are used to define an element’s height as a percentage of its parent. These classes are useful for creating flexible layouts that adapt to the size of their container.
Definition and Usage
Example
| Property | Value |
|---|---|
| Ht1p | height: 1%; |
| Ht50p | height: 50%; |
| Ht100p | height: 100%; |
Note
This property gives height as a percentage of the parent element's height. The parent element must have a defined height for percentage-based heights to work correctly.
The range of this property is from 1 to 100.
Height in Viewport
The Height in Viewport Height utility classes set an element’s height relative to the height of the browser viewport. These classes are ideal for creating full-screen sections or components that scale with the user's screen.
Definition and Usage
Example
| Property | Value |
|---|---|
| Ht1vh | height: 1vh; |
| Ht50vh | height: 50vh; |
| Ht100vh | height: 100vh; |
Note
This property is useful when ensuring sections fill a specific portion of the screen regardless of content.
The range of this property is from 1 to 100.
Min Height
The Min-Height utility classes define the minimum height an element can shrink to. This is useful for maintaining layout integrity, especially when dealing with dynamic or flexible content.
Min Height in Pixels
The Min-Height in Pixels utility classes are used to set a minimum height in fixed pixel values. These ensure that an element does not shrink below a specified height, regardless of its content or container.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMn1 | min-height: 1px; |
| HtMn16 | min-height: 16px; |
| HtMn100 | min-height: 100px; |
Note
Use this when you need reliable height limits across components like cards, sections, or modals.
The range of this property is from 1 to 100.
min-height in Percentage
The Min-Height in Percentage utility classes set the minimum height of an element relative to the height of its parent. These classes are helpful in responsive layouts where an element should never shrink below a certain proportion of its container.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMn1p | min-height: 1%; |
| HtMn50p | min-height: 50%; |
| HtMn100p | min-height: 100%; |
Note
The parent element must have a defined height for percentage-based heights to work correctly. Use this when working with flex or grid layouts that rely on proportional sizing.
The range of this property is from 1 to 100.
min-height in Viewport
The Min-Height in Viewport Height utility classes define a minimum height based on the height of the browser viewport. These classes are ideal for maintaining vertical space in responsive layouts, especially for hero sections, modals, or full-screen components.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMn1vh | min-height: 1vh; |
| HtMn50vh | min-height: 50vh; |
| HtMn100vh | min-height: 100vh; |
Note
This property is useful when ensuring sections fill a specific portion of the screen regardless of content.
The range of this property is from 1 to 100.
Max Height
The Min-Height utility classes define the minimum height an element can shrink to. This is useful for maintaining layout integrity, especially when dealing with dynamic or flexible content. Often used with overflow: auto to allow scrolling within a fixed area.
Max Height in Pixels
The Max-Height utility classes set an upper limit on the height of an element. This ensures that an element doesn’t exceed a specified height, while still allowing it to grow naturally with its content up to that limit.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMx1 | max-height: 1px; |
| HtMx16 | max-height: 16px; |
| HtMx100 | max-height: 100px; |
Note
Pair with overflow: auto or overflow-y: scroll to enable internal scrolling when content exceeds the max height.
The range of this property is from 1 to 100.
max-height in Percentage
The Max-Height in Percentage utility classes are used to define the maximum height of an element as a percentage of its parent container. This is especially useful in responsive layouts where height needs to adapt while maintaining a limit.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMx1p | max-height: 1%; |
| HtMx50p | max-height: 50%; |
| HtMx100p | max-height: 100%; |
Note
The parent element must have a defined height for percentage-based heights to work correctly. Use this when working with flex or grid layouts that rely on proportional sizing.
The range of this property is from 1 to 100.
min-height in Viewport
The Max-Height in Viewport Height utility classes define the maximum height of an element relative to the height of the browser’s viewport. These are especially useful for controlling the vertical size of elements across different screen sizes while keeping layouts responsive.
Definition and Usage
Example
| Property | Value |
|---|---|
| HtMx1vh | max-height: 1vh; |
| HtMx50vh | max-height: 50vh; |
| HtMx100vh | max-height: 100vh; |
Note
This property is useful when ensuring sections fill a specific portion of the screen regardless of content.
The range of this property is from 1 to 100.