Si tenga presente un concetto importante: l’altezza di un elemento di blocco è determinata dal suo contenuto, se a priori non sono state definite dimensioni width ed height.
Più testo viene inserito in un box, più esso si estenderà in verticale. Questo presupposto deve essere chiaro. Le proprietà che verranno prese in esame, servono per fornire un risultato in grado di controllare o superare il comportamento standard.
La proprietà height
La proprietà height è utilizzata per assegnare un'altezza esplicita ad un elemento di tipo block. Come anticipato, in mancanza di dimensoni assegnate, l'altezza del div sarà determinata dall'ingombro effettivo dei suoi contenuti. L'altezza può essere definita assegnando un valore numerico (seguito da un'unità di misura), un valore percentuale oppure "auto".
La sintassi CSS:
selettore {height: valore;}
Esempio di codice CSS:
div {height: 300px;}
ul {height: 60%;}
p {height: auto;}
Le proprietà che si possono assegnare a sono:
- height
- min-height
- max-height
- auto
Proprietà height
Come è facilmente intuibile, la proprietà height necessita che venga dichiarata una altezza esplicita nel codice css.
div{height:250px;}
Proprietà min-height
La proprietà min-height indica che ad un determinato elemento di blocco sia assegnata una altezza minima. Se i contenuti dovessero eccedere questa altezza, il div si adatterà ad essi.
div{min-height:250px;}
Proprietà max-height
La proprietà max-height, indica che un elemento di blocco non deve superare l'altezza dichiarata. Se i contenuti dovessero eccedere questa altezza, verranno mostrati al di fuori del contenitore, cioè il loro div.
div{min-height:250px;}
Proprietà auto
La proprietà auto non prevede nessun limite ad accogliere contenuti al suo interno. Sia che si tratti di un rigo, di un paragrafo o di una immagine molto grande, esso si adatterà in altezza.
div{height:auto;}
Altezza div in percentuale
Un elemento di blocco può avere anche un'altezza in percentuale, relativa al suo elemento padre.
Se abbiamo il body con altezza dichiarata al 100%, l'altezza di un eventuale div è relativa all'altezza del body stesso.
elemento genitore{height:400px;}
div figlio{height:50%;}
Come scritto poco fa, l'altezza dell'elemento "figlio" sarà pari al 50% dell'altezza dell'elemento "genitore", vale a dire 200px.
Una serie di esempi sulla gestione delle altezze con height
La proprietà overflow
Le proprietà height e overflow sono strettamente collegate. La proprietà overflow fornisce un modo alternativo per la gestione delle altezze di un div quando i contenuti superano l'altezza assegnata con height.
I valori sono espressi mediante parole chiave:
- visible: valore di default. Il contenuto eccedente rimane visibile
- hidden: il contenuto eccedente viene nascosto
- scroll: il browser crea barre di scroll che consentono di vedere il contenuto eccedente
- auto: il browser tratta il contenuto in surplus secondo le proprie impostazioni. Normalmente mostra una barra di scroll laterale destra.
La sintassi:
div {overflow: visible;}
div {overflow: hidden;}
div {overflow: scroll;}
div {overflow: auto;}
La proprietà overflow visible
Un div, a cui è stata assegnata un'altezza, mostrerà al di fuori di esso i contenuti se questi dovessero eccedere l'altezza stessa.
div{height:300px; overflow:visible;}
La proprietà overflow hidden
Un div, a cui è stata assegnata un'altezza, nasconderà i contenuti se questi dovessero eccedere l'altezza stessa.
div{height:300px; overflow:hidden;}
La proprietà overflow scroll
Se i contenuti dovessero eccedere, sia in larghezza che in altezza, al div con dimensioni assegnate il browser visualizzerà la barra di scorrimento orizzontale e verticale.
div{
width:300px;
height:300px;
overflow:scroll;
}
La proprietà overflow auto
Se in un div con altezza impostata in pixel ed overflow su auto, i contenuti dovessero superare l'altezza stessa, il browser mostrerà la barra di scorrimento laterale per far visualizzare il contenuto eccedente.
div1{
height:300px;
overflow:auto;
}
Anche in questo caso è possibile vedere nel file di esempio il comportamento di un div con la proprietà overflow.