"Max-height" è una proprietà CSS che può essere applicata a qualsiasi elemento HTML di livello di blocco, ad esempio < div >, < p > o < blockquote >, impostare l'altezza massima possibile per quell'elemento. Se il contenuto supera l'altezza massima, il comportamento predefinito è quello di visualizzare il contenuto comunque; è possibile modificare questo aggiungendo il "troppo pieno" proprietà CSS per l'elemento in questione.

Comportamento predefinito

Se è specificata alcuna proprietà di "overflow", contenuto che non rientra l'altezza specificata dell'elemento verrà visualizzato in ogni caso, traboccante i confini dell'elemento contenitore. Ciò può causare problemi di layout e leggibilità, poiché qualsiasi contenuto trovato subito dopo l'elemento trabocca sarà parzialmente coperti da allo straripamento contenuto.

Contenuto di traboccante di nascondersi

Aggiunta di una proprietà di "overflow" con un valore di "nascosto" all'elemento trabocca farà sì che tutti i contenuti che non rientra l'altezza specificata verrà nascosto. Ad esempio, se un'immagine 500 pixel di altezza è contenuta all'interno di un set di < div > ad un'altezza massima di 250 pixel e riversamento nascosto, solo la metà dell'immagine verrà visualizzata.

Aggiunta di barre di scorrimento

L'impostazione del valore della proprietà "overflow" su "auto" causerà una barra di scorrimento a comparire se il contenuto supera l'elemento che la contiene, permettendo la totalità del contenuto ad essere disponibile senza problemi di layout o leggibilità. Impostando il valore di "overflow" per "scorrere" causerà un'orizzontale e una barra di scorrimento verticale per essere sempre visibile, se il contenuto supera elemento che la contiene o no.

Considerazioni

Anche se quando si progetta il tuo sito Web i contenuti non invasa il vostro elementi block di altezza limitata, è necessario aggiungere più contenuti in futuro. Per questo motivo, ogni volta che si utilizza la proprietà CSS "max-height", si deve sempre aggiungere la proprietà di "overflow" pure; Questo sarà a prova di futuro il tuo layout e consentono di aggiungere contenuto senza apportare modifiche al layout della stessa. Se si imposta l'overflow di essere nascosto o visualizzato con barre di scorrimento dipenderà la natura dei tuoi contenuti.