Sizing

Easily make an element as wide or as tall with our width and height utilities.

CSS Width

Width 10%
Width 20%
Width 30%
Width 80%
Width 90%
Width 100%

CSS Height

Setting the correct height for elements in CSS is essential for building responsive, full-height layouts that adapt to various screen sizes and devices. One of the most common challenges for developers is ensuring that a div or any element takes up the full height of its parent or the entire viewport.

If you want a div or any element to take up the entire height of the browser window, you can use the 100vh (viewport height) unit. This will ensure the element fills the entire height of the screen.Astral.CSS utility class full-vh is used to accomplish this.

Height 10%
Height 20%
Height 30%
Height 40%
Height 50%
Height 90%
Height 100%

Auto

You can also use utilities to set the width and height to auto.

w-auto
h-auto

Max width and height

You can also use utilities to set the max width and height relative to the viewport.

mw-100
mh-100