CSS Utility Classes Sizing
Make an element as wide or as tall as you need using width and height utilities.
Width and height utilities provide support for 25%
, 50%
, 75%
, 100%
, and auto by default.
Width
Preview
Component.vue
Height
Preview
Component.vue
Max Width
Preview
Component.vue
Max Height
Preview
Component.vue
Viewport Relative Sizing
You can also use utilities to set the width and height relative to the viewport.
<div class="_width:100vw">100% Viewport Width</div>
<div class="_height:100vh">100% Viewport Height</div>
<div class="_max-width:100vw">100% Viewport Max Width</div>
<div class="_max-height:100vh">100% Viewport Max Height</div>