Propiedad min-height de CSS

La propiedad min-height establece la altura mínima de un elemento. Esta propiedad impide que el valor de la propiedad height sea menor que el valor especificado para min-height.

La propiedad min-height interactúa con las propiedades height y max-height según las reglas de dimensionamiento de CSS.

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

INFO

Los valores negativos no están permitidos.

Valor inicial	0
Se aplica a	Todos los elementos, excepto elementos en línea no reemplazados, grupos de columnas y 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 min-height de CSS

css

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

Ejemplo de la propiedad min-height:

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

html

<!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>

Try it Yourself »

Resultado

SS min-height Property

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

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

html

<!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>

Try it Yourself »

Valores

| Valor | Descripción | Probar » | |---|---| | auto | El navegador calcula y selecciona una altura mínima para el elemento indicado. | Probar » | | length | Define la altura mínima en px, pt, cm, etc. El valor predeterminado es 0. | Probar » | | % | Establece la altura mínima en % del elemento contenedor. | | | calc() | Calcula la altura mínima usando una expresión. | Probar » | | fit-content() | Establece la altura mínima según el tamaño del contenido. | Probar » | | max-content | Establece la altura mínima en el ancho/alto máximo intrínseco del contenido. | Probar » | | min-content | Establece la altura mínima en el ancho/alto mínimo intrínseco del contenido. | Probar » | | initial | Hace que la propiedad use su valor predeterminado. | Probar » | | 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 tal propiedad 'min-height' en CSS.Permite evitar que una caja CSS se reduzca más allá de un cierto tamaño.Define la altura exacta de un elemento.

Propiedad min-height de CSS ​

Sintaxis ​

Ejemplo de la propiedad min-height: ​

Resultado ​

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

Valores ​