Minimum height

The min-height CSS property defines an element’s minimum height. It ensures an element always maintains a minimum height, even if its content is insufficient to occupy the available space. This improves a site’s overall readability and helps adapt responsive content to different devices, screen sizes, and orientations. It does not, however, affect assets larger than an element's minimum height.

Here’s an example code snippet of a CSS min-height property:

.container {

  min-height: 200px;

}

The container guarantees a minimum height of 200 pixels and expands as the content needs. Without the min-height property, the container shrinks to accommodate its contents, leading to inconsistent and unorganized layouts.

Learn how to size CSS elements in Webflow University’‍.