高度height

Setting an element’s height.

Overview

Examples

Set a fixed height

Use h:* to set the CSS height property. Fixed heights are best for controls, media frames, skeletons, and areas with intentionally bounded content.

<div class="h:12x bg:gray-5">    ...</div>

@layer utilities {    .h\:12x {        height: 3rem    }}

Fill a parent height

Use h:full when the parent has a definite height.

<section class="h:64x">    <div class="h:full">...</div></section>

If the parent height is automatic, percentage heights such as h:full and h:50% may not resolve the way you expect. This is native CSS behavior.

Use viewport and intrinsic values

Use native CSS units for viewport-sized regions, and keywords when the content should define the block size.

<main class="min-h:100dvh">...</main><aside class="h:fit">...</aside>

Size both axes together

For square icons, avatars, and controls, prefer size over repeating w:* and h:*.

<button class="size:10x round">...</button>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="h:10x:hover h:14x@sm h:full@dark h:auto@print">...</div>

Use min-height when content may grow but the region still needs a baseline size.