In this section, we will learn what the height property is and how to use it in CSS.

Click here to run the example of height property.

CSS height Property Definition and Usage

By default, the height of a box increases and decreases by the size of its content! But CSS supports a property called `height` by which we can change the height of an element. Basically, using this property, we can set a fixed size for the height of an element or make it dependent on sizes other than its content.

Note: the height of an element is only the height of its content without the size of its padding and borders and margins. But if you want this height to be combined with the mentioned attributes, you need to change the value of the `box-sizing` property for the target element.

CSS height Property Syntax

height: auto|length|initial|inherit;

CSS height Property Value

The value for this property is any number accompanied by any CSS supported unit.

Note: you can’t use % unless the value for `height` property in the parent is explicitly set. Because the height of a container is typically determined by the height of its children and this produces a circular definition that browsers can’t resolve and so it’ll ignore the declaration if percentage is used.

Note: the default value is set to auto. This means the height of an element is determined by the height of its children!

Example: height property in CSS

See the Pen height property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

CSS Height 100%

As mentioned before, we can’t set the height of an element to 100% if its parent’s size if not explicitly set! Again, this is because, by default, the height of an element is determined by the size of its children.

Now if you have an element and you want it to have the 100% of its parent’s height, then that parent element needs to have an explicitly defined height.

For example, we can first set the height of a parent element to 100vh for example (to have the 100 percent height of the display device) and then set the height of its child element to 100%. This way the child element will take the 100% of the display device.

Example: Height 100% CSS

See the Pen Height 100% CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: Height auto CSS

See the Pen Height auto CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Note: as mentioned before, the default value of height property for HTML elements is set to auto.

Example: div height 100%

See the Pen div height 100% by Omid Dehghan (@enjoytutorials1) on CodePen.