# height

> Applies the physical `height` property, keeping element size tied to the viewport axis across writing-modes and directions.

```ts
import { height } from "@sdxc/u/size";
```

Applies the physical `height` property, keeping element size tied to
the viewport axis across writing-modes and directions. Prefer `u.bs()`
(`block-size`) for content that should track the logical block axis.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.height("full")` | `css({ height: "100%" })` |

## Examples

### Basic example

Use `height(n)` with a step of the spacing scale, like `height(16)` or `height(32)`, to set an element's physical height:

```tsx
<div mix={[hstack({ gap: 4, align: "end" })]}>
	<div mix={[height(12), width(24), ...]}>height(12)</div>
	<div mix={[height(20), width(24), ...]}>height(20)</div>
	<div mix={[height(28), width(24), ...]}>height(28)</div>
	<div mix={[height(36), width(24), ...]}>height(36)</div>
	<div mix={[height(44), width(24), ...]}>height(44)</div>
</div>
```

### Filling the parent

Use `height("full")` to fill the height of a parent that sets one, or pass any CSS length as a string, like `height("50%")`:

```tsx
<div mix={[hstack({ gap: 4, align: "start" }), height(48), p(4), ...]}>
	<div mix={[height("full"), width(32), ...]}>height("full")</div>
	<div mix={[height("50%"), width(32), ...]}>height("50%")</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.height("full"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.height("full"))
```

## Customizing your theme

### Customizing spacing

Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:

```css
:root {
	--ui-spacing: 0.25rem;
}
```

Every call that names the step now reads the new value:

```ts
height(4)
```

## Signature

```ts
u.height(value: SizeValue)
```