Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
CSS Min Height Property

CSS Min Height Property

By Riya Verma
5 mins read
Last updated: 20 Dec 2022
146 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The min-height property specifies the minimum height of an HTML element.

  • The height's value cannot be smaller than the height's minimum value.
  • The min-height property preserves the set minimum height even if the content supplied within the element is less and is ineffective if the content is larger than the minimum height.
  • The CSS min-height property applies to block level and replaced elements.
  • The min-height property will apply to all elements except table columns and column groups.

NOTE : No matter where we place the min-height property in our declaration, it overrides both the height and max-height property.

Syntax for CSS Min-Height

The CSS min height property accepts keyword values such as auto, max-content, min-content, etc. It supports numeric values such as length in px, em, and percentage.

In the further sections of the article, we will discuss the values that the min-height property supports in more detail.

Property Values for CSS min-height

ValueDescriptionSyntax
It defines the minimum height in px, cm, etc.min-height: example: min-height:100px;
It specifies the minimum height in percent of the containing blockmin-height: example : min-height:10%;
autoThe browser will calculate and select a min-height for the specified element with an auto value.min-height;
max-contentThe max-content value indicates the content's intrinsic maximum height. The max-content height represents the height of a paragraph if each paragraph is one long sentence with no soft line breaks.min-height;
min-contentA min-content sizing keyword specifies the content's intrinsic minimum height. The min-content height represents the tallest a box can get by breaking all lines at all potential breakpoints.min-height;
fit-contentThe fit-content value adjusts the height according to this formula: min(maximum size, max(minimum size, argument))min-height: fit-content(20em);

Examples of CSS min-height

Setting min-height

In this example, we'll set the minimum element height using the various values supported by the min-height property.

HTML:

CSS:

Output: PROPERTY MIN HEIGHT

Browser Support

The following browsers support the CSS min height property:

BrowserVersion
Google Chrome1.0
Safari1.0
Mozilla Firefox1.0
Microsoft Edge12.0
Opera4
Chrome Android18
Firefox for Android4
Opera Android10.1
Safari on iOS1
Samsung Internet1.0
WebView Android4.4

Conclusion

  • The min-height property in CSS defines the minimum height of an element.
  • The min-height property preserves the set minimum height even if the content supplied within the element is less.
  • The min-height property doesn't work if the content is larger than the minimum height.
  • The CSS min height property applies to block level and replaced elements.
  • The CSS min height property takes keyword values such as auto, max-content, min-content, etc.
  • It supports numeric values such as length in px, em, and percentage.