Set the maximum height of an element.
Syntax max-height: length | percentage | none | inherit ;
Length - The max height in px, pt or em.
percentage - The max height as a percentage value
none - No limit on the height. (default)
inherit - inherit from the parent element.
max-content - Experimental/CSS 3, the intrinsic preferred height.
min-content - Experimental/CSS 3, the intrinsic minimum height.
fit-content - Experimental/CSS 3, the intrinsic preferred height.
fill-available - Experimental /CSS 3, The containing block height minus horizontal margin, border and padding.
available - An ancient name for the keyword above (some browsers only)
Max-height does not include padding, borders, or margins.
If a div contains more text or larger text, than will fit within a limited height, then it will scroll below the bottom border.
Examples:
h1 { max-height: 25px; }
.emw3class { max-height: 2em; }
#emw3id { max-height: 25pt; }
Try it:
This is a sample of text with a CSS border. The border helps to display the height of the element. |
(CSS 2) Browser Support: All major browsers.
“Happiness makes up in height what it lacks in length” ~ Robert Frost
Related:
min-height -Minimum height of an element.
height - Height of an element.
width - Width of an element.
box-sizing - The CSS box model used to calculate the height and width of elements.