Nelle prossime cinque lezioni CSS vedremo come definire e controllare le diverse proprietà del box-model. In questa vedremo in che modo si impostano le dimensioni verticali di un elemento.
Un primo concetto fondamentale: in genere l'altezza di un elemento è determinata dal suo contenuto. Più testo inserisco in box più essi saranno estesi in senso verticale. Semplice. Le proprietà che analizzeremo servono, in pratica, a fornire un meccanismo in grado di controllare o superare in qualche modo questo comportamento standard.
La proprietà CSS height
Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata e si applica a tutti gli elementi tranne:
- colonne di tabelle;
- elementi inline non rimpiazzati.
Sintassi ed esempi
selettore {height: valore;}Il valore può essere espresso da:
- un valore numerico con unità di misura;
- un valore in percentuale: il valore in percentuale è sempre definito rispetto all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata; diversamente, la percentuale viene interpretata come
auto; - auto: l'altezza sarà quella determinata dal contenuto.
div {height: 250px;}
ul {height: 50%;}
p {height: auto;}La proprietà CSS min-height
Imposta un'altezza minima per un elemento. Valgono per questa proprietà le stesse osservazioni fatte per height relativamente al contenuto. Non è ereditata.
Sintassi ed esempi
selettore {min-height: valore;}I valori possono essere:
- un valore numerico con unità di misura;
- un valore in percentuale.
div {min-height: 200px;}
p {min-height: 30%;}La proprietà CSS max-height
La proprietà max-height serve a impostare l'altezza massima di un elemento. Anche per essa valgono le osservazioni già fatte per il contenuto eccedente. Non è ereditata.
Sintassi ed esempi
selettore {max-height: valore;}Per i valori possiamo ricorrere a:
- none: valore iniziale e di default, l'altezza dell'elemento non è limitata;
- un valore numerico con unità di misura;
- un valore in percentuale.
div {max-height: 400px;}
p {max-height: 40%;}
form {max-height: none;}La proprietà CSS overflow
Strettamente collegata alla proprietà height è la proprietà overflow. Essa fornisce un modo per gestire il contenuto che superi i limiti imposti con height. Serve infatti per definire il comportamento di un elemento blocco nel caso il suo contenuto ecceda dalle sue dimensioni esplicite, ossia nel caso in cui l'area utile del box non sia sufficiente per i contenuti. È da usare quando si vogliano creare box ad altezza fissa ma con molti contenuti. Si applica a tutti gli elementi blocco e non è ereditata.
Sintassi ed esempi
selettore {overflow : valore;}I valori possono essere espressi con le parole chiave:
- visible: valore iniziale, il contenuto eccedente rimane visibile;
- hidden: il contenuto eccedente non viene mostrato;
- scroll: il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente;
- auto: il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite; di norma dovrebbe mostrare una barra di scorrimento laterale.
div {overflow: auto;}
p {overflow: hidden;}
div {overflow: visible;}
p {overflow: scroll;}