Minheight

Min-height is a CSS property that sets the minimum height of an element. It ensures the element cannot be shorter than the specified value, even if the content inside is smaller. The final rendered height may be greater if content, padding, borders, or other constraints require it.

Syntax and values: Min-height accepts length units (such as px, em, rem), percentage values, or the keyword auto. In modern CSS it can also take intrinsic sizing keywords such as min-content and max-content, which size the box to the corresponding content dimension. A value of auto means no additional minimum height beyond the element’s default height behavior.

How it interacts with height: Min-height acts as a lower bound for the element’s height. If a height is specified, the element will not go below that minimum. If height is auto, min-height still governs the minimum height that the element can take, particularly when content is small or the layout constrains the element.

Layout considerations: In normal block flow, min-height expands the element to satisfy its minimum height. In flexible layouts, such as flexbox, min-height can influence how items grow or shrink and helps keep elements usable in diverse viewport sizes. In grid layouts, it can contribute to consistent row or column sizing and responsiveness.

Common uses: A common scenario is a hero or banner that should occupy at least a certain vertical space on large screens (for example, min-height: 400px). It can also maintain a visually balanced layout when content varies between sections or when containers resize.

Browser support: Min-height is widely supported in modern browsers and is a standard part of CSS2.1 and newer specifications.