Gestire l'altezza di un box con i CSS applicando la proprietà overflow

Avremmo avuto lo stesso risultato se avessimo utilizzato i FRAMES oppure gli I-FRAMES. Gestendo un box in maniera più semplice, attraverso i CSS, possiamo arrivare a controllare l'altezza dello stesso con la proprietà overflow.

Quello che deve essere chiaro sin da subito è che l'altezza di un div viene determinata dal suo contenuto - testo o altro che sia -

La proprietà overflow indica al browser come deve comportarsi con il contenuto di un determinato elemento contenitore nel caso in cui le impostazioni quali, width ed height, non consentono la totale visualizzazione.

Vediamo adesso il codice per un contenitore con contenuto maggiore rispetto alla sua altezza:

<style type="text/css">
#contenuto {
border: 1px solid #000066;
overflow: auto;
height: 320px;
width:500px;
padding-right: 15px;
padding-left:5px;
}
</style>

In questo modo avremo un div con barra di scorrimento se, e solo se, il testo al suo interno eccede in altezza. Va anche ricordato che la proprietà si applica a tutti gli elementi di blocco e non è ereditata.

I valori che può assumere la proprietà overflow

Una pagina di esempio con tale proprietà è stata preparata per visualizzare l'effetto che produce su un div.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati