This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

min-height

Summary

Sets the minimum height for an element. It prevents the height of the element to exceed the specified value. It overrides both the height & the max-height property if any them is specified below the min-height value.

Overview table

Initial value
auto (0 for non-flex elements)
Applies to
All elements but non-replaced inline elements, table columns, and column groups
Inherited
No
Media
visual
Computed value
The percentage as specified or the absolute length
Animatable
Yes
CSS Object Model Property
min-height
Percentages
Of the height of containing block. If the height of the containing block depends on the content & the element does not have position as absolute, then this value becomes 0.

Syntax

  • min-height: auto
  • min-height: calc
  • min-height: fill-available
  • min-height: fit-content
  • min-height: inherit
  • min-height: length
  • min-height: max-content
  • min-height: min-content
  • min-height: percentage

Values

auto
Default. Behaves as 0 for non-flexbox elements. On flexbox acts as min-content.
length
Specifies a fixed height. Negative values are not allowed. See length for possible units.
percentage
A <percentage> relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as 0. Negative values are not allowed
calc
See css calc function for mode details.
inherit
Takes the same specified value as the property for the element’s parent.
max-content
The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
min-content
The narrowest measure a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fill-available
Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fit-content
If 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.

Examples

Use min-height with any CSS selector to apply it.

/* Ensure all div elements are a min-height of 100px */
div { min-height: 100px }

min-height property overrides the height of an element.

<style>
/* min-height example */

/*Default width. Height is based on the content*/
.without-min-height, .with-min-height {
    width: 100px;
}

/*Max height overrides height*/
.with-min-height {
    background: cyan;
    min-height: 300px;
}

.without-min-height {
    background: red;
}

.content {
    border: 1px solid black;
    padding: 10px;
}
</style>

<div class="without-min-height"><p class="content">Without Min Height. Height taken from content (with black border).</p></div>
<br />
<div class="with-min-height"><p class="content">With Min Height. Content (with black border) may not fill entirety of element.</p></div>

View live example

Usage

 CSS min height is well supported across most browsers. A few things to consider while usage:
  • min-height overrides max-height. If min-height supplied is greater than max-height, max-height does not have an impact.
  • max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
  • Support for calc is better across browsers. Vendor prefixes may be needed.

Related specifications

CSS 2.1 (Section 10.7)
W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3
Working Draft

See also

Related articles

Box Model

Related pages

Attributions