min-height

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Resumen

La propiedad min-height se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima (min-height).

Valor inicialauto
Applies toelementos de bloque o remplazados
Heredableno
PercentagesSe refiere a la altura del bloque contenedor.
Valor calculadothe percentage as specified or the absolute length
Animation typea length, percentage or calc();

Sintaxis

min-height = 
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Values

  • length : puede ser en px, cm, in (píxel, centímetro o inches)
  • percentage : % especificado como un porcentaje de la altura del bloque contenedor.

Examples

table {min-height: 75%;}

form {min-height: 0;}

Notes

min-height tiene prioridad sobre los valores max-height y height.

Especificaciones

Specification
CSS Box Sizing Module Level 3
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
min-height
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
max-content
min-content
stretch
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también