Impostare l’altezza con i CSS: le proprietà height e overflow

24 giugno 2013

Nelle prossime cinque lezioni 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à 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;}

Esempi.

La proprietà 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à 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à 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;}

Esempi.

Tutte le lezioni

1 ... 13 14 15 ... 33

Se vuoi aggiornamenti su Impostare l'altezza con i CSS: le proprietà height e overflow inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Impostare l'altezza con i CSS: le proprietà height e overflow

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy