Il tag <div> è sicuramente tra i box più usati come raccoglitore di contenuti e per la preparazione di layout per le pagine web, capirne il corretto funzionamento secondo il box-model e formattarlo correttamente usando i fogli di stile (CSS), è basilare per chi realizza pagine html e sviluppa sul web.
Come descritto nel precedente articolo "Impostare altezza div con Javascript", uno degli aspetti fondamentali del div è la gestione della sua altezza, esso di default adatta la sua altezza al testo e immagini che esso contiene; in altri casi questa viene impostata come fissa specificandone il valore height in pixel o in percentuale in una regola di stile.
Ovviamente con un'altezza fissa per un div, nasce l'esigenza di gestirne la visualizzazione quando il suo contenuto varia, risultando di meno o in eccedenza rispetto all'altezza fissata, nell'articolo "Impostare altezza div con Javascript" abbiamo visto come modificare l'altezza di un div tramite una semplice funzione Javascript, questa tecnica sebbene efficace, ha la grossa limitazione di essere inutilizzabile quando i browser hanno Javascript disabilitato. Per ovviare a questo problema, ed ottenere una più estesa compatibilità cross-browser ci vengono in aiuto i Cascading Style Sheets (CSS) o più semplicemente Fogli di Stile, i quali ci consentono di specificare degli attributi per la proprietà height in grado di gestire correttamente l'altezza di un div anche quando il suo contenuto varia dinamicamente.
Supponiamo allora di avere uno o più div per i quali dobbiamo gestire l'altezza in modo dinamico, beh! non dobbiamo far altro che definire la proprietà height nella regola di stile associata al div come auto, in questo modo:
div {height:auto;}
In questo modo l'altezza del div si adattera automaticamente al suo contenuto. Questo però non è altro che il comportamento di default del div, ovvero il div si adatta già di per se al contenuto senza nessuna regola di stile, a meno che noi non specifichiamo diversamente, come in questo modo:
div {height:100px;}
div {height:50%;}
In questo secondo caso impostiamo un'altezza del div come "fissa", e possiamo esprimere questi valori o in px o in percentuale, per quest'ultimo la percentuale sarà calcolata relativamente all'altezza del contenitore padre del nostro div. La regola di ereditare l'altezza del tag contenitore (o padre) si può esprimere anche direttamente, così:
div {height:inherit;}
dichiarando questa regola, il div eredita l'altezza del suo contenitore a meno di eventuali padding o margin aggiuntivi.
Infine i fogli di stile ci consentono di definire esattamente come il div deve comportarsi, quando il suo contenuto eccede oltre la sua altezza, definendo l'attributo overflow ed i suoi valori in una regola di stile associata al div, in questo modo:
div {overflow:inherit;} /* eredita il comportamento del tag contenitore */
div {overflow:auto;} /* a seconda le impostazioni del browser, crea o meno uno scroll */
div {overflow:hidden;} /* il testo che supera l'altezza viene nascosto */
div {overflow:scroll;} /* crea uno scroll con le classiche barre di scorrimento laterali */
div {overflow:visible;} /* il testo in eccesso resta visibile ma non formattato */
L'attributo overflow ci consente così di personalizzare il comportamento del div quando il suo contenuto supera l'altezza, e per il contrario invece? Se il contenuto è minore dell'altezza minima che intendiamo specificare per il nostro div, in questo caso possiamo dichiarare una regola di stile che specifichi l'altezza minima (e massima) del nostro div, in questo modo:
div {min-height:100px;}
div {max-height:50%;}
Anche qui, possiamo definire i valori sia in pixel che in percentuale, con gli stessi concetti esposti per il caso sopracitato; con queste regole siamo certi che il nostro div non avrà mai un'altezza inferiore o superiore a quella che abbiamo definito nella regola.
Conclusioni
Usare i fogli di stile per definire l'altezza del tag div è l'approccio corretto da usare, prima per un discorso di accessibilità, che a differenza dell'uso di Javascript per settare l'altezza di un div non ha la limitazione che se javscript è disabilitato nel browser non funziona; è secondo per un discorso di eleganza di sviluppo, velocità di esecuzione e flessibilità nell'apportare modifiche al layout web.
Chiunque voglia aggiungere qualcosa in merito a "Impostare altezza div con i Fogli di Stile (CSS)", può farlo liberamente tramite i commenti.