Propiedad CSS min-height

La propiedad min-height establece la altura mínima de un elemento. El elemento puede crecer más allá de este valor cuando su contenido necesita más espacio, pero nunca puede ser más pequeño que él. En efecto, min-height pone un límite inferior a la altura del cuadro.

Esto es útil cuando se desea garantizar una cantidad de espacio vertical incluso cuando hay poco o ningún contenido — por ejemplo, un banner hero, una tarjeta o un pie de página que siempre debe tener una apariencia sólida sin importar cuánto texto contenga.

Cómo interactúa min-height con height y max-height

Las tres propiedades de altura son resueltas conjuntamente por las reglas de dimensionamiento del navegador:

Si el valor calculado de height es menor que min-height, el elemento se fuerza a min-height (el mínimo gana).
Si el valor calculado de height es mayor que min-height, min-height no tiene efecto.
min-height siempre tiene prioridad sobre max-height: cuando ambas entran en conflicto, el elemento tendrá al menos la altura de min-height, aunque supere max-height.

De este modo, la altura efectiva queda acotada en el rango min-height ... max-height, y el contenido que desborde ese rango queda gobernado por la propiedad overflow.

La propiedad acepta una longitud CSS (px, em, rem, vh, etc.) o un porcentaje.

Información

Un min-height en porcentaje se calcula a partir de la altura del elemento padre. Si el padre no tiene una altura definida explícitamente, el porcentaje se trata como 0 (es decir, no tiene efecto) — una fuente habitual de confusión. Los valores negativos nunca son aceptados.

Valor inicial	0
Se aplica a	Todos los elementos, excepto los elementos en línea no reemplazados, los grupos de columnas y las columnas de tabla.
Heredable	No.
Animable	Sí. La altura es animable.
Versión	CSS2
Sintaxis DOM	object.style.minHeight = "100px";

Sintaxis

Sintaxis de la propiedad CSS min-height

min-height: auto | length | percentage | calc() | initial | inherit;

Ejemplo de la propiedad min-height:

Ejemplo de la propiedad CSS min-height con valor en px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad min-height especificada como "3cm":

Ejemplo de la propiedad CSS min-height con valor en cm

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Pruébalo tú mismo »

Uso de palabras clave basadas en el contenido

Además de longitudes y porcentajes, min-height acepta palabras clave de dimensionamiento intrínseco que basan el mínimo en el propio contenido:

min-content — la altura mínima que puede tener el contenido sin desbordarse (aproximadamente la altura al ajustarse lo más posible).
max-content — la altura que tendría el contenido si nunca se forzara a ajustarse.
fit-content() — se limita al espacio disponible pero nunca supera max-content.

Son útiles cuando se desea que un cuadro sea "tan alto como su contenido, pero nunca más pequeño que eso", sin especificar un valor en píxeles fijo.

Un caso de uso común: estirar para llenar un contenedor flex

min-height: 100vh es un patrón popular para diseños de "pie de página pegajoso" — hace que un contenedor sea al menos tan alto como el viewport para que el pie de página quede en la parte inferior incluso en páginas cortas, mientras permite que la página crezca cuando el contenido es extenso:

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* at least the full viewport, but can grow */
}

.page main {
  flex: 1; /* pushes the footer to the bottom */
}

Dado que se trata de un mínimo, el diseño nunca recorta el contenido largo — el cuadro simplemente se expande más allá de 100vh. Combínalo con box-sizing: border-box para que el relleno y los bordes no se sumen a la altura calculada de forma inesperada.

Valores

Valor	Descripción	Pruébalo
auto	El navegador calcula y selecciona un min-height para el elemento dado.	Pruébalo »
length	Define la altura mínima en px, em, rem, etc. El valor por defecto es 0.	Pruébalo »
%	Establece la altura mínima como porcentaje de la altura del padre.
calc()	Calcula la altura mínima usando una expresión.	Pruébalo »
fit-content()	Establece la altura mínima según el tamaño del contenido, acotada al espacio disponible.	Pruébalo »
max-content	Establece la altura mínima igual a la altura máxima intrínseca del contenido.	Pruébalo »
min-content	Establece la altura mínima igual a la altura mínima intrínseca del contenido.	Pruébalo »
initial	Hace que la propiedad use su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'min-height' en CSS?

Establece la altura mínima de un elemento.Establece la altura máxima de un elemento.No existe ninguna propiedad 'min-height' en CSS.Permite evitar que un cuadro CSS se encoja más allá de un tamaño determinado.Define la altura exacta de un elemento.

Propiedades relacionadas

height — establece la altura preferida de un elemento.
max-height — limita la altura máxima que puede alcanzar un elemento.
min-width — el equivalente horizontal de min-height.
box-sizing — controla si el relleno y los bordes se tienen en cuenta en la altura.
overflow — determina qué ocurre cuando el contenido supera el cuadro.