min-height

Avatar of Sara Cope
Sara Cope on

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.

The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  height: 100%;     /* full height of the content box */
  min-height: 20em; /* Will be AT LEAST 20em tall */
}

.wrapper {
  height: 600px;
  min-height: 400px; /* Will be AT LEAST 20em tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

If either value is greater (height > min-height or vice-versa), the value that is greatest will be the one rendered. The min-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).

Browser support

IEEdgeFirefoxChromeSafariOpera
AllAllAllAllAllAll
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAll59+
Source: caniuse