min-height
Quick Summary for min-height
min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
Code Usage for min-height
/* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* Global values */ min-height: inherit; min-height: initial; min-height: revert; min-height: unset; More Details for min-height
min-height
The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
The element's height is set to the value of min-height whenever min-height is larger than max-height or height.
Syntax
/* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* Global values */ min-height: inherit; min-height: initial; min-height: revert; min-height: unset; Values
<length> Defines the min-height as an absolute value.
<percentage> Defines the min-height as a percentage of the containing block's height.
auto The browser will calculate and select a min-height for the specified element.
max-content The intrinsic preferred min-height.
min-content The intrinsic minimum min-height.
fit-content(<length-percentage>) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0. |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |
Formal syntax
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
Examples
Setting min-height
table { min-height: 75%; } form { min-height: 0; } Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 3 # width-height-keywords |
See also
The box model,box-sizing height, max-height Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
