Extrowebsite

Si tenga presente un concetto importante: l’altezza di un elemento è determinata dal suo contenuto, se a priori non sono state definite dimensioni width ed height. Più testo viene inserito in un box, più esso sarà esteso in verticale. Questo presupposto deve essere ben 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;}

Il racchiude quanto descritto fino ad ora.

La proprietà min-height

Con questa proprietà viene impostata un’altezza minima per un elemento. Vale lo stesso discorso fatto per height relativamente al contenuto.

Sintassi:

selettore {min-height: valore;}

I valori possono essere o un valore numerico con unità di misura oppure un valore in percentuale.

div {min-height: 280px;}
p {min-height: 35%;}

La proprietà max-height

Come è facile intuire, tale proprietà serve ad impostare l’altezza massima di un elemento.

Sintassi:

selettore {max-height: valore;}

Accetta valori quali:

  • none: valore di default. L’altezza dell’elemento non è limitata;
  • un valore numerico con unità di misura
  • un valore in percentuale
div {max-height: 500px;}
p {max-height: 50%;}
form {max-height: none;}
.

La proprietà overflow

Le proprietà height ed overflow sono strettamente collegate. La proprietà overflow fornisce un modo alternativo per la gestione del contenuto quando superi l'altezza, impostata con height.

Sintassi:

selettore {overflow : valore;}

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.
div {overflow: auto;}
div{overflow: scroll;}
div {overflow: visible;}
div{overflow: hidden;}

Il racchiude qualche esempio.