Height

Define the height of elements depending on the viewport or match the heights of different elements.

UIkit's Height component offers three options to set heights: using simple fixed height utility classes, depending on the viewport or by matching the heights of different elements.

For convenience many height options are also embed in Background, Card and other stacks.

Small
Medium
Large
Tip Use the following classes in the custom class field to centre the content vertically: uk-flex uk-flex-center uk-flex-middle

Height viewport

Use the height-viewport option to create a container that fills the height of the entire viewport. You can change the height behavior by using the offset-top, offset-bottom or expand options.
OPTIONDESCRIPTION
offset-top
Subtracts the element's top offset from its height.
offset-bottom
Subtracts the height (true) of the sibling that immediately follows the element, the given percentage (Number), Pixel (px) value from element's own height or the given element's height.
expand
Expands the element's height to make a short page fill the viewport.
min-height
Sets a minimum height. Useful if all children are positioned absolute.

Match height

Use the match height option in Grid stack to expand all children of a container to the same height regardless of their content. View examples in Grid stack page.