Heights

A suite of utilities to influence element height.

Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.

Source

Contributors

Base

Viewport

Makes the element height the same as the browser viewport. Useful for minimalist designs where you require content to be vertically centered across all device types.

This will always be the same height as the browser viewport.

<div class="u-height-viewport">This will always be the same height as the browser viewport.</div>

Square

Makes the element height always stay in proportion to width; creating a square.

This will always be square.

<div class="u-height-square">This will always be square.</div>