CSS min-height
La proprietà CSS3 min-height imposta l'altezza minima di un elemento
La proprietà min-height in CSS3 permette di garantire che un elemento mantenga sempre una certa altezza minima, anche quando il contenuto è scarso. È utile per creare sezioni coerenti in altezza e migliorare l'estetica del layout responsivo.
Sintassi
Significato dei valori principali:
-
auto: Valore predefinito. L'altezza minima viene calcolata automaticamente in base al contenuto.
-
lunghezza: Imposta un valore fisso come altezza minima. Può essere espresso in
px,em,rem, ecc. Esempio:min-height: 200px; -
percentuale (%): Imposta l'altezza minima in base all'altezza del contenitore padre. Esempio:
min-height: 50%; -
inherit: L'elemento eredita il valore dal suo genitore.
Esempio proprietà: min-height
Codice Esempio: min-height
.min-height-example {
min-height: 200px;
width: 80%;
padding: 20px;
background-color: #e8f5e9;
border: 2px solid #388e3c;
border-radius: 10px;
font-size: 18px;
margin: auto;
text-align: center;
}
Contenuto Esempio: min-height
Esempio di utilizzo di min-height
In questo esempio, l'altezza minima del contenitore è impostata a 200px. Anche con poco contenuto, l'altezza non scenderà mai sotto quel valore:
CSS e HTML per un contenitore con altezza minima:
<style>
.min-height-example {
min-height: 200px;
width: 80%;
padding: 20px;
background-color: #e8f5e9;
border: 2px solid #388e3c;
border-radius: 10px;
font-size: 18px;
margin: auto;
text-align: center;
}
</style>
<div class="min-height-example">
Contenitore con altezza minima di 200px
</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.214
