Sizing

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

CSS Width

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Width 25%


Width 50%


Width 75%


Width 100%


Width auto
We have other width class utilities like w-0,w-8,w-17,w-20,w-25,w-33,w-40,w-42,w-58,w-60,w-67,w-80,w-83w-91

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.AiraCSS utility class full-vh is used to accomplish this.

Height 25%
Height 50%
Height 75%
Height 100%

  
Height 25%

  
Height 50%

  
Height 75%

  
Height 100%
We have other height class utilities like h-0,h-8,h-17,h-20,h-25,h-33,h-40,h-42,h-58,h-60,h-67,h-80,h-83h-91

Relative to the viewport

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

Height 100vh


Min Height 100vh


Height 50vh


Height 25vh


Width 100vw


Width 50vw


Width 25w

Max width and height

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

  
  
Max Width 100%

  
Max Width 65ch

  
Max Height 100%

Min width and height

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



Min Width 0


Min Height 100vh
On this page