Proprietà CSS max-height

La proprietà max-height imposta l'altezza massima a cui un elemento può crescere. L'elemento può essere più basso di questo valore, ma non sarà mai più alto. Se la proprietà height è impostata su un valore maggiore, max-height la sovrascrive e limita l'elemento.

Questo è utile ogni volta che si ha contenuto di lunghezza sconosciuta o variabile — una casella commenti, un pannello a tendina, una finestra di chat, un'immagine o una card — e si vuole evitare che spinga il resto del layout. Abbina max-height alla proprietà overflow in modo che il contenuto più alto del limite scorra invece di fuoriuscire visibilmente.

Questa pagina tratta la sintassi, tutti i valori accettati, come max-height interagisce con min-height e height, e i pattern più comuni nel mondo reale.

Come si risolve max-height

Quando si applicano più proprietà correlate all'altezza, il browser le risolve in un ordine fisso di precedenza:

min-height vince su max-height che vince su height

In altre parole, se imposti height: 100px; max-height: 50px, l'elemento viene renderizzato a 50px (max vince). Ma se imposti anche min-height: 80px, l'elemento viene renderizzato a 80px (min vince su max). Questo ordine è importante quando più regole collidono — min-height ha sempre l'ultima parola.

Attenzione alle percentuali: un max-height in percentuale viene risolto rispetto all'altezza del blocco contenitore. Se quel genitore non ha un'altezza esplicita (la sua altezza è auto), la percentuale non ha nulla di concreto da misurare e max-height si comporta come none.

Valore iniziale	none
Si applica a	Tutti gli elementi, eccetto elementi inline non sostituiti, colonne di tabella e gruppi di colonne.
Ereditato	No.
Animabile	Sì. L'altezza è animabile.
Versione	CSS2
Sintassi DOM	object.style.maxHeight = "50px";

Sintassi

Sintassi della proprietà CSS max-height

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

Esempio con un valore fisso in px

Nell'esempio seguente il paragrafo è limitato a 50px. Poiché il testo è più lungo, overflow: auto aggiunge una barra di scorrimento in modo che il contenuto rimanga leggibile senza rompere il layout.

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

Provalo tu stesso »

Esempio con un valore in cm

Qui il primo paragrafo non ha limite (max-height: none), mentre il secondo è limitato a 2cm. Questo mostra come lo stesso contenuto si comporta con e senza un limite affiancato.

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

Provalo tu stesso »

Esempio con valori percentuali e calc()

Entrambi i box seguenti hanno un height esplicito, quindi i valori percentuali e calc() hanno un riferimento a cui fare riferimento. Il primo è limitato alla metà della propria altezza; il secondo usa calc() per lasciare un margine di 50px al di sotto del limite.

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

Provalo tu stesso »

Valori

Valore	Descrizione	Prova
none	Valore predefinito. Nessuna altezza massima impostata.	Prova »
length	Imposta un'altezza massima fissa in px, pt, cm, ecc.	Prova »
percentage	Imposta l'altezza massima come percentuale dell'altezza del blocco contenitore.	Prova »
calc()	Calcola l'altezza massima usando un'espressione.	Prova »
max-content	Imposta l'altezza massima alla dimensione massima intrinseca del contenuto.	Prova »
min-content	Imposta l'altezza massima alla dimensione minima intrinseca del contenuto.	Prova »
fit-content	Imposta l'altezza massima alla dimensione fit-content.	Prova »
initial	Imposta questa proprietà al suo valore predefinito.	Prova »
inherit	Eredita questa proprietà dall'elemento genitore.	Prova »

Casi d'uso comuni

Pannelli scorrevoli. Un menu a tendina, una barra laterale o un registro chat che non deve mai superare il viewport: imposta max-height più overflow-y: auto.
Immagini responsive. img { max-height: 80vh; } impedisce a un'immagine alta di superare l'altezza dello schermo pur ridimensionandosi su viewport piccoli.
Sezioni espandibili / "leggi di più". Anima max-height da un valore piccolo a uno più grande per rivelare contenuto nascosto con una transizione CSS (animare max-height funziona dove animare height: auto non funziona).
Card dall'aspetto uniforme. Limitare max-height sui corpi delle card evita che una griglia di card abbia un riquadro fuori controllo.

Suggerimenti e avvertenze

max-height imposta solo un limite superiore — non forza un elemento ad avere quell'altezza. Usa height o min-height per questo.
Senza un valore overflow, il contenuto più alto di max-height semplicemente fuoriesce dalla casella. Aggiungi overflow: auto (scorrimento) o overflow: hidden (ritaglio) per controllarlo.
Un max-height in percentuale richiede che il genitore abbia un'altezza risolta, altrimenti viene ignorato.
Ricorda che border e padding contribuiscono alla casella a meno che non si imposti box-sizing; il content-box predefinito misura max-height solo rispetto all'area del contenuto.
Esiste una proprietà equivalente per la larghezza: vedi max-width.

Esercitazione

Pratica

Qual è la funzione della proprietà 'max-height' in CSS?

Imposta l'altezza massima per un elemento.Imposta l'altezza minima per un elemento.Limita la larghezza di un elemento.Garantisce che l'altezza di un elemento non superi un determinato valore.Reimposta l'altezza di un elemento su 'auto'.