Box
height
height sets the height of an element. With the initial auto it grows and shrinks with the content; with a length it stays that tall however much content there is.
Syntax
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
height: 64px;
}Controls
height64px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length such as
64px: uses that height. Content that does not fit overflows the box (hide it or make it scroll withoverflow). auto: fits the content. This is the initial value.min-content,max-contentandfit-content: in horizontal text, all of these are about the same asautofor height.
When % does nothing
A percentage height such as 50% only works when the parent has a definite height. When the parent's height is auto, it acts like auto, so this page does not offer it. To match the screen height, use a viewport unit such as 100dvh.
Usually it is better to let the content decide the height and use min-height for a minimum, so the layout holds up when content grows.