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 :)

Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Regolare l’altezza dei DIV in base alla finestra scritto da .

2 Responses to Regolare l’altezza dei DIV in base alla finestra

  1. giovanni dice:

    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…)

  2. Merlinox dice:

    @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.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>