Cosa succede se il contenuto Superamento max-height in CSS?

April 16

"Max-altezza" è una proprietà CSS che può essere applicato a qualsiasi elemento HTML a livello di blocco, come <div>, <p> o <blockquote>, per impostare l'altezza massima possibile per tale elemento. Se il contenuto trabocca l'altezza massima, il comportamento predefinito è quello di visualizzare il contenuto in ogni caso; è possibile modificare questo aggiungendo la proprietà CSS "overflow" per l'elemento in questione.

Comportamento predefinito

Se non è specificata alcuna proprietà "troppo pieno", il contenuto che non rientra nell'ambito all'altezza specificata dell'elemento verrà visualizzata in ogni caso, traboccante i confini del suo elemento contenente. Ciò può causare problemi di layout e di leggibilità, dal momento che qualsiasi contenuto trovato subito dopo l'elemento traboccante sarà parzialmente coperto dal contenuto traboccante.

Nascondere contenuti Traboccante

L'aggiunta di una proprietà di "troppo pieno" con un valore di "nascosto" per l'elemento traboccante causerà tutti i contenuti che non rientra nell'ambito all'altezza specificata per essere nascosto. Ad esempio, se un'immagine 500 pixel di altezza è contenuta all'interno di un <div> impostato ad una altezza massima di 250 pixel e troppopieno nascosto, verrà visualizzato solo metà dell'immagine.

L'aggiunta di barre di scorrimento

Impostare il valore della proprietà "troppo pieno" a "auto" causerà una barra di scorrimento a comparire se il contenuto trabocca il suo elemento di contenimento, consentendo la totalità del contenuto sia disponibile senza problemi di layout e di leggibilità. Impostando il valore "troppo pieno" a "scorrimento" causerà sia orizzontale e una barra di scorrimento verticale per essere sempre visibile, se il contenuto trabocca il suo elemento contenente o meno.

considerazioni

Anche se quando si progetta il tuo sito web sul suo sito web non invasa tuoi elementi di blocco in altezza limitata, potrebbe essere necessario aggiungere più contenuti in futuro. A causa di questo, ogni volta che si utilizza la proprietà CSS "max-height", si deve sempre aggiungere la proprietà "troppo pieno", come pure; questo sarà a prova di futuro il layout e consentono di aggiungere contenuti senza apportare alcuna modifica al layout stesso. Se si imposta l'overflow essere nascosto o visualizzato con barre di scorrimento dipende dalla natura del contenuto.