CSS max-height
La proprietà CSS3 max-height imposta l'altezza massima di un elemento
La proprietà max-height in CSS3 consente di definire un limite massimo per l'altezza di un elemento. Se il contenuto supera tale limite, il comportamento dipenderà dal valore impostato per overflow. È utile per creare layout responsivi e gestire contenuti dinamici.
Sintassi
Significato dei valori principali:
-
none: Valore predefinito. Non viene impostata alcuna altezza massima.
-
lunghezza: Specifica un limite massimo con unità come
px,em,rem, ecc. Esempio:max-height: 300px; -
percentuale (%): Imposta l'altezza massima in base all'altezza del contenitore padre. Esempio:
max-height: 50%; -
inherit: Eredita il valore della proprietà dal genitore.
Esempio proprietà: max-height
Codice Esempio: max-height
.max-height-example {
max-height: 150px;
width: 80%;
overflow-y: auto;
padding: 15px;
border: 2px solid #50a14f;
background-color: #e0f7fa;
font-size: 18px;
border-radius: 10px;
}
Contenuto Esempio: max-height
Esempio di utilizzo di max-height
In questo esempio, l'elemento ha un'altezza massima impostata a 150px. Quando il contenuto supera questa altezza, viene mostrata una barra di scorrimento verticale:
CSS e HTML per un contenitore con altezza massima:
<style>
.max-height-example {
max-height: 150px;
width: 80%;
overflow-y: auto;
padding: 15px;
border: 2px solid #50a14f;
background-color: #e0f7fa;
font-size: 18px;
border-radius: 10px;
}
</style>
<div class="max-height-example">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur lorem ut...
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.221
