要素の高さを指定するプロパティです。px、%、vh、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの値も使用でき、レイアウトの高さ制御に重要な役割を果たします。
height: <length> | <percentage> | auto | min-content | max-content | fit-content| 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。
.element {
height: 128px;
}height: 200px;高さを200pxに固定
height: 100%;親要素の高さに合わせる
height: fit-content;内容に合わせて高さを自動調整
%指定は親要素の高さが明示されていないと効かない。
高さを固定するとレスポンシブで崩れることがある。
height: 100%は親に明示的な高さがないと効かない点がAIコードの定番バグです。また100vhはモバイルのアドレスバーで実際の画面からはみ出すため、現在は100dvh（動的ビューポート単位）が推奨ですが、AIは古い知識で100vhを出しがちです。
モバイルで100vhの要素が画面からはみ出す問題をdvh単位で修正して
height: 100%が効かない原因を親要素の高さ指定から調査して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。