# height

> 要素の高さを指定するプロパティです。px、%、vh、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの値も使用でき、レイアウトの高さ制御に重要な役割を果たします。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/height/

## 構文

```css
height: <length> | <percentage> | auto | min-content | max-content | fit-content
```

## Tailwindでは

- `h-full` → height: 100%
- `h-screen` → height: 100vh
- `h-dvh` → height: 100dvh
- `h-4` → height: 16px
- 一般形: `h-{n}（n×4px）`
- 任意値: `h-[52px]`
- 補足: モバイルのアドレスバー対策には h-dvh / h-svh / h-lvh。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 高さを200pxに固定

```css
height: 200px;
```

### 例2: 親要素の高さに合わせる

```css
height: 100%;
```

### 例3: 内容に合わせて高さを自動調整

```css
height: fit-content;
```

## TIPS

%指定は親要素の高さが明示されていないと効かない。

## よくある間違い

高さを固定するとレスポンシブで崩れることがある。

## AIがよく間違えるポイント

height: 100%は親に明示的な高さがないと効かない点がAIコードの定番バグです。また100vhはモバイルのアドレスバーで実際の画面からはみ出すため、現在は100dvh（動的ビューポート単位）が推奨ですが、AIは古い知識で100vhを出しがちです。

## AIへの依頼文例

- モバイルで100vhの要素が画面からはみ出す問題をdvh単位で修正して
- height: 100%が効かない原因を親要素の高さ指定から調査して

## 関連プロパティ

- [width](https://www.css-dictionary.com/property/width.md)
- [box-sizing](https://www.css-dictionary.com/property/box-sizing.md)
- [interpolate-size](https://www.css-dictionary.com/property/interpolate-size.md)
- [field-sizing](https://www.css-dictionary.com/property/field-sizing.md)