CSS height property

Property values

autoDefault

auto value means the height will be changed automatically according to the content.

height: auto;

Try it { }

length

300

The height of an element should be at least 300px.

height: 300px;

Try it { }

percentage

30

The height of an element should be 30% of the parent box.

height: 30%;

Try it { }

min-content

min-content value represents that the height of an element must be equal to or greater than the largest minimum height of some descendant item i.e. it depends upon the minimum height of child element.

In this case, the min-height of descendant element is 100px.

height: min-content;

Try it { }

max-content

max-content value means the height of an element must be equal to or less than the largest maximum height of some descendant item i.e. it depends upon the miximum height of child element.

In this case, the max-height of descendant element is 200px.

height: max-content;

Try it { }