Propiedad max-height de CSS

La propiedad max-height establece la altura máxima de un elemento. Si la propiedad height se establece en un valor mayor, max-height la sobrescribe. Ten en cuenta que min-height tiene prioridad sobre max-height, y max-height tiene prioridad sobre height.

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

Sintaxis

Sintaxis de la propiedad max-height de CSS

css

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Ejemplo de la propiedad max-height:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad max-height definida como "cm":

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad max-height con valores en porcentaje y calc():

Ejemplo de la propiedad CSS max-height con valores en porcentaje y calc()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
none	Valor predeterminado. No se establece una altura máxima.	Probarlo »
length	Establece una altura máxima fija en px, pt, cm, etc.	Probarlo »
percentage	Establece la altura máxima como un porcentaje de la altura del bloque contenedor.	Probarlo »
calc()	Calcula la altura máxima utilizando una expresión.	Probarlo »
max-content	Establece la altura máxima en el tamaño máximo intrínseco del contenido.	Probarlo »
min-content	Establece la altura máxima en el tamaño mínimo intrínseco del contenido.	Probarlo »
fit-content	Establece la altura máxima en el tamaño fit-content.	Probarlo »
initial	Establece esta propiedad en su valor predeterminado.	Probarlo »
inherit	Hereda esta propiedad de su elemento padre.	Probarlo »

Práctica

¿Cuál es la función de la propiedad 'max-height' en CSS?

Establece la altura máxima de un elemento.Establece la altura mínima de un elemento.Limita el ancho de un elemento.Asegura que la altura de un elemento no exceda un valor determinado.Restablece la altura de un elemento a 'auto'.

Propiedad max-height de CSS ​

Sintaxis ​

Ejemplo de la propiedad max-height: ​

Ejemplo de la propiedad max-height definida como "cm": ​

Ejemplo de la propiedad max-height con valores en porcentaje y calc(): ​

Valores ​

Práctica ​

Propiedad max-height de CSS

Sintaxis

Ejemplo de la propiedad max-height:

Ejemplo de la propiedad max-height definida como "cm":

Ejemplo de la propiedad max-height con valores en porcentaje y calc():

Valores

Práctica