Per questioni di design a volte uno spazio limitato in verticale è una soluzione accettabile,
e perché no, auspicabile se si riesce a sfruttare im maniera adeguata. In questo articolo vedremo
come sfruttare un'altezza limitata grazie all'uso delle scrollbar e in particolare
grazie alla proprietà CSS overflow.
Questa proprietà, forse poco conosciuta, stabilisce come un contenitore si deve comportare
se il suo contenuto eccede le sue dimensioni orizzontali e/o verticali. Impostando i valori di overflow stabiliamo i diversi comportamenti:
| Valore | Comportamento |
|---|---|
| hidden | il contenuto che "sconfina" verrà tagliato. |
| visible | si forza il contenitore a rendere il contenuto anche se sborda. |
| auto | aggiungerà le scrollbar orizzontale e/o verticale solo se necessario. |
| scroll | mostrerà le scrollbar in ogni caso. |
Con overflow impostato su auto, insieme a larghezza e/o altezza esplicita otterremo facilmente elementi di pagina con scrollbar. Vediamo subito il primo esempio, in cui un div che contiene diversi paragrafi viene reso con una scrollbar verticale.
L'HTML è molto semplice:
<div class="box">
il contenuto qui
</div>Basterà attribuire la classe "box" al div cui vogliamo dare un'altezza prestabilita e le scrollbar.
Ora passiamo al CSS, che è piuttosto semplice. È necessario fare due piccole somme: nel caso dell'esempio si vuole ottenere un div quadrato di lato di 200 pixel totali, bordi e padding inclusi. Ricordo che le dimensioni CSS width e height si riferiscono secondo le specifiche infatti solo all'area utile al contenuto.
Usando un padding sui due lati pari a 4 px, e un bordo di un pixel solo sul lato sinistro,
la larghezza orizzontale (width) dovrà essere 191 pixel (ovvero 200-4-4-1).
Stesso discorso per l'altezza, tenendo presente che i bordi sono sui due lati in questo caso, ottenendo così una height effettiva pari a 190 pixel.
Specificate quindi dimensioni, bordi e padding non resta quindi che dichiarare l'overflow e un gradiente che si ripete come sfondo. Ecco quindi l'unica regola neccessaria:
div.box
{
width:191px !important; width /**/:200px;
height:190px !important; height /**/: 200px;
padding: 4px;
border:1px solid #EEE; border-right:0 solid;
background:url(gradient.png) repeat-x fixed top left;
overflow:auto
}Da notare che le prime due dichiarazioni relative a width e height, ovvero quelle seguite da !important vengono servite ai browser moderni e aderenti alle specifiche, mentre le altre due solo a IE5.x. Il nostro esempio è quindi ultimato: rivediamolo.
Box con HTML scrollbar interna
Siamo così pronti a presentare il secondo esempio in cui si ha un box quadrato con una cornice grafica e una scrollbar al suo interno. In questo caso per ottenere l'effetto sono necessari due div come contenitori, ecco l'HTML:
<div class="box">
<div class="box-inner">
il contenuto qui
</div>
</div>Al div con classe "box" verrà infatti attribuita la grafica, mentre a quello più interno con classe "box-inner" verrà attribuita la scrollbar. In questo caso non è necessario l'uso del box model hack, e il CSS è piuttosto semplice, vediamolo per intero:
div.box
{
width:250px; height:250px;
background:url(boxbk.png) no-repeat top left;
padding:1px 0;
font-size:10px
}
div.box-inner
{
height: 200px;
overflow:auto;
margin:25px 24px 0;
padding-right:2px
}Da evidenziare che il padding verticale di 1px sul div class="box" è necessario per contenere i margini verticali del box interno, che infatti avrà il margine superiore (e quelli laterali) per distanziarsi dal suo contenitore. Il padding-right di 2px dichiarato sul div class="box-inner" serve per distanziare un po' la scrollbar. Per ottenere l'esempio è quindi bastata una semplice immagine (ovviamente potrete sbizzarrirvi con forme e colori) e due semplici regole CSS.
Codice e immagini sono disponibili per il download. Alla prossima.
Box model hack
Benché siano molto datate e poco utilizzate, le versioni di Internet Explorer 5.0 e 5.5 possono dare problemi di box model quando si lavora con altezze e larghezze impostate con bordi e padding.
