ボックス
height
height は要素の高さを決めます。初期値の auto では中身の高さに合わせて伸び縮みし、長さで決めると中身が多くてもその高さのままになります。
構文
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
height: 64px;
}コントロール
height64px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
64pxなどの長さ：その高さにします。中身が収まらないときは箱からはみ出します（overflowで隠したりスクロールさせたりできます）。auto：中身の高さに合わせます。初期値です。min-content・max-content・fit-content：横書きの高さでは、どれもautoとほぼ同じになります。
% が効かないとき
50% のような % の高さは、親の高さが決まっているときだけ効きます。親の高さが auto のときは auto と同じになるので、このページでは選べるようにしていません。画面の高さに合わせたいときは 100dvh などのビューポートの単位を使います。
ふつうは高さを決めずに中身に任せ、最低限の高さだけ決めたいときは min-height を使うと、中身が増えても崩れません。