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
auto
primo esempio
div
L'HTML è molto semplice:
<div class="box">
il contenuto qui
</div>Basterà attribuire la classe "box"
div
Ora passiamo al CSS, che è piuttosto semplice. È necessario fare due piccole somme: nel caso dell'esempio
div
width
height
Usando un padding sui due lati pari a 4 px, e un bordo di un pixel solo sul lato sinistro,
la larghezza orizzontale (width
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
height
!important
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"
padding-right
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.
