The min-height property sets the minimum height of an element's box. The actual height will not fall below this value. Percentages refer to the containing block's height (if defined)..hero {
min-height: 50vh;
}.sticky-footer {
min-height: calc(100vh - var(--header));
}min:0max:9999step:1units:% | px | em | rem | vw | vhautoAutomatic minimum (default value) — resolves to 0 for CSS2 display types; may differ for flex/grid (tied to content size).min-contentThe minimum content height.max-contentThe maximum content height.fit-contentFunction value: combines min-content and max-content given the available space.fit-content()fit-content(<length-percentage>) — constrains height by the given length.calc()Computes a value from a math expression.CSS Box Sizing Module Level 3Editor's Draft<length-percentage>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext