Regolare l’altezza dei DIV in base alla finestra

Un velocissimo script per creare un elemento DIV che si adatti alle dimensioni della finestra. Purtroppo le dimensioni in altezza percentuali via CSS sono ancora un sogno. Forse qualche browser le supporta: comunque non è standard.

Ecco allora un veloce script Javascript che sistema le cose a dovere:

<script type="text/javascript">
window.onload = function(){
resizeMe();
}
window.onresize = function(){
resizeMe();
}
function resizeMe(){
//http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var myWidth = 0;
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
document.getElementById("tree").style.height = (myHeight - 50) + "px";
}
</script>

Fatto? Dai provatelo e fatemi sapere se vi funziona bene 🙂

Loading Facebook Comments ...

2 pensieri su “Regolare l’altezza dei DIV in base alla finestra

  1. giovanni

    Ciao, scusami ma se lo script ha calcolato anche la larghezza dello schermo, non è possibile usarlo anche impostare la larchezza del div tree?
    Del tipo: document.getElementById(“tree”).style.width = (myWidth – 200) + “px”;
    (200 che saranno usati da windows come barre di scorrimento, menu, ecc…)

    Rispondi
  2. Merlinox Autore articolo

    @giovanni alla fine puoi fare un po’ quello che vuoi. Se poi usi jquery è tutto ancora più facile. Solitamente la larghezza di un DIV la si imposta senza problemi via CSS e di default un DIV occupa tutto lo spazio laterale a disposizione.

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *