totn CSS

CSS: height property

This CSS tutorial explains how to use the CSS property called height with syntax and examples.

Description

The CSS height property defines the height of the content area of an element.

Syntax

The syntax for the height CSS property is:

height: value;

Parameters or Arguments

value

The height of the content area of an element. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
div { height: 50px; }
div { height: 30em; }
percentage Percentage value
div { height: 100%; }
auto Browser will calculate the height for the element
div { height: auto; }
inherit Element will inherit the height from its parent element
div { height: inherit; }

Note

  • The content area of an element is inside the padding, border, and margin of the element.
  • The CSS height property applies to block level and replaced elements.
  • When the value is provided as a percentage, it is relative to the height of the containing block.
  • See also width, max-height, max-width, min-height, min-width.

Browser Compatibility

The CSS height property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the height property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let's look at a CSS height example where we have provided the height as a fixed value expressed in pixels.

div { height: 90px; }

In this CSS height example, we have set the <div> tag to a height of 90px.

We can also express the height as a fixed value in em's.

div { height: 40em; }

In this CSS height example, we have set the <div> tag to a height of 40em.

Using Percentage

Let's look at a CSS height example where we have provided the height as a percentage.

div { height: 95% }

In this CSS height example, we have set the height of the <div> to 95%.

Using auto

Let's look at a CSS height example where we have used auto as the height value.

div { height: auto; }

In this CSS height example, the browser will calculate the height of the <div>.

Share on: