Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 14 di 33
  • livello principiante
Indice lezioni

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

Definire l'altezza di un elemento: sintassi e valori
Definire l'altezza di un elemento: sintassi e valori
Link copiato negli appunti

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 {;}
ul {height: 50%;}
p {height: auto;}

Esempi.

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-;}
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-;}
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;}

Esempi.


Ti consigliamo anche