CSS min-height Property

Description

The min-height property sets the minimum height of an element. Element height value will be calculated depending on the set values of the height, max-height and min-height properties.

Initial value: 0
Applies to: All elements except non-replaced inline elements and table elements
Inherited: No
Computed value: The percentage as specified or the absolute length
Animatable: Yes
JavaScript syntax: object.style.minHeight

Interactive Demo

min-height: 150px;

min-height: 7em;

min-height: 20%;

min-height: 10px;

This is a box where you can change the minimum height.
If there is more content than the minimum the box will grow to the height needed by the content.

Syntax

min-height: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content

Values

<length>Specifies a fixed width. Negative values are not allowed.
<percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
max-contentThe max-content width or height.
min-contentThe min-content width or height.
availableThe containing block width or height minus margin, border, and padding.
fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Example

HTML

<div class="test">The block which the minimum height is set to 100px.</div>

CSS

.test {
   min-height: 100px;
   background: orange;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS min-height property.

Desktop

12	1	3	4	1.3

Tablets / Mobile

18	4	14	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024

Support Us