Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

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.

Prosegue...

Il tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.

Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?

Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.

Prosegue...