Gestione delle dimensioni: altezza | Guida CSS

Gestione delle=20 dimensioni: altezza

Con le prossime cinque lezioni vedremo come sia possibile = definire e controllare le diverse propriet=E0 del box-model. In questa vedremo in che modo = nei CSS=20 si impostino le dimensioni verticali di un elemento. Un = primo=20 concetto fondamentale: in genere l'altezza di un elemento = =E8=20 determinata dal suo contenuto. Pi=F9 testo inserisco in = box, in un=20 paragrafo o in una cella di tabella pi=F9 essi saranno = estesi in senso=20 verticale. Semplice. Le propriet=E0 che analizzeremo servono = in=20 pratica a fornire un meccanismo in grado di controllare o = superare=20 in qualche modo questo comportamento standard.

height

Questa propriet=E0 definisce la distanza tra il bordo = superiore e=20 quello inferiore di un elemento. Non =E8 ereditata e si = applica a=20 tutti gli elementi tranne:

colonne di tabelle=20
elementi inline non rimpiazzati

Sintassi

selettore {height: <valore>;}

Valori

un valore numerico con unit=E0 di misura.
un valore in percentuale. Il valore in = percentuale si=20 riferisce sempre all'altezza del blocco contenitore, = purch=E9 esso=20 abbia un'altezza esplicitamente dichiarata. Diversamente, = la=20 percentuale viene interpretata come auto.=20
auto. L'altezza sar=E0 quella determinata dal = contenuto.=20

L'uso di height va sempre valutato con attenzione = e non=20 pensando di farne una scorciatoia per avere layout precisi = al pixel.=20 Il caso pi=F9 importante da valutare =E8 quando il contenuto = dovesse=20 superare i limiti imposti tramite la propriet=E0. Il = comportamento dei=20 vari browser =E8 al riguardo notevolmente diverso, come si = pu=F2=20 osservare nell'esempio. Explorer non fa altro che = ignorare=20 l'altezza impostata estendendola. Mozilla e Opera rispettano = la=20 regola, ma il contenuto eccedente va a sovrapporsi agli = elementi=20 vicini o sottostanti. Ricordatelo: molte volte si pu=F2 = ottenere lo=20 stesso risultato visivo desiderato usando propriet=E0 come = padding e=20 margin. E considerate sempre che l'altezza =E8 = indirettamente=20 influenzata anche dalla larghezza di un elemento.

Esempi

div {height: 250px;}
p.blocco {height: = 50%;}

overflow

Esiste un modo per gestire il contenuto che superi i = limiti=20 imposti con height. Usare la propriet=E0 = overflow. Si=20 applica a tutti gli elementi blocco e non =E8 ereditata.

Sintassi

selettore {overflow : <valore>;}

Valori

visible. Valore iniziale. Il contenuto = eccedente rimane=20 visibile (con i problemi visti sopra).=20
hidden. Il contenuto eccedente non viene = mostrato.=20
scroll. Il browser crea barre di scorrimento = che=20 consentono di fruire del contenuto eccedente.=20
auto. Il browser tratta il contenuto eccedente = secondo=20 le sue impostazioni predefinite. Di norma dovrebbe = mostrare una=20 barra di scorrimento laterale.

Potete verifcare i risultati delle diverse impostazioni = nella=20 pagina di esempio.

Esempi

div {overflow: auto;}

min-height

Imposta un'altezza minima per un elemento. Valgono per = questa=20 propriet=E0 le stesse osservazioni fatte per height=20 relativamente al contenuto. Non =E8 ereditata e non =E8 = supportata da=20 Explorer Win (test).

Sintassi

selettore {min-height: = <valore>;}

Valori

un valore numerico con unit=E0 di misura.
un valore in percentuale

Esempi

div {min-height: 200px;}

max-height

La propriet=E0 max-height serve a impostare = l'altezza=20 massima di un elemento (test). Anche per essa valgono le = osservazioni gi=E0=20 fatte per il contenuto eccedente. Non =E8 ereditata.

Sintassi

selettore {max-height: = <valore>;}

Valori

none. Valore iniziale. L'altezza dell'elemento = non =E8=20 limitata.=20
un valore numerico con unit=E0 di misura.
un valore in percentuale

Esempi

div {max-height: 400px;}

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =