totn CSS

CSS: max-height property

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

Description

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

Syntax

The syntax for the max-height CSS property is:

max-height: value;

Parameters or Arguments

value

The max-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 { max-height: 50px; }
div { max-height: 40em; }
percentage Percentage value
div { max-height: 85%; }
none No maximum height is applied to the element
div { max-height: none; }
inherit Indicates that the element will inherit the max-height from its parent element
div { max-height: inherit; }

Note

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

Browser Compatibility

The CSS max-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 max-height property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let's look at how to provide the max-height as a fixed value expressed. First, we will express the max-height in pixels.

For example:

div { max-height: 65px; }

In this CSS max-height example, the height of the <div> tag can not exceed 65px.

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

For example:

div { max-height: 50em; }

In this max-height example, the height of the <div> tag can not exceed 50em.

Using Percentage

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

div { max-height: 75% }

In this example, the height of the <div> can not exceed 75%.

Using none

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

div { max-height: none; }

In this CSS max-height example, no maximum height is applied to the <div> element. This would be useful if you wanted to remove a max-height from a tag.

Share on: