1. css
  2. /properties
  3. /min-height

min-height

Definition

The min-height property sets the minimum height of a block-level element. This property is used to ensure that an element has a minimum size even if it contains no content. The min-height property is often used with height and max-height to create a responsive design.

Examples

Setting a minimum height for a div element:

div {
  min-height: 100px;
}

Setting a minimum height for a text area element:

textarea {
  min-height: 50px;
}

Setting a minimum height for a table element

table {
  min-height: 300px;
}

Values

ValueDescription
autoDefault value. The element's height is determined by its content.
<length>Specifies the minimum height in pixels or other absolute or relative units.
<percentage>Specifies the minimum height as a percentage of the containing block's height.
inheritInherits the min-height property from the parent element.
initialSets the min-height property to its default value.
unsetInherits the min-height property from the parent element, or sets it to its default value if there is no parent.

Best Practices

  • Use min-height with height and max-height to create a responsive design that ensures an element has a minimum size on different devices and screen sizes.
  • Avoid setting a fixed min-height for elements that need to grow dynamically to fit their content, such as text blocks. Use height and max-height instead, or consider setting a maximum size with max-height.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • Avoid setting min-height on table cells, as it can cause the table to become unresponsive to changes in content or viewport size.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes