CSS min-height Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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