è il solito problema.. scusate se lo ripropongo, ma ho letto una montagna di roba a riguardo, provato centinaia di diverse possibili combinazioni e ancora non ne sono venuto a capo: impostare l'altezza di un div al 100% dell'elemento padre indipendentemente dal contenuto.
semplificando:
il problema è che #corpo ha l'altezza dovuta ai contenuti e non quella prefissata. provando con i background colorati sembra che #w1 non acquisisca il 100% dell'altezza di body (che invece è ok).Codice PHP:<html>
<head>
<style type="text/css">
body, #w1, #w2, #corpo{height:100%;width:100%;}
body{background-color:blue;}
#w1{background-color:yellow;}
#w2{background-color:red;}
#corpo{background-color:brown;}
#c-sx,#c-dx{position:absolute;top:0px;background-color:#0F0;width:50px;height:100%}
#c-sx{left:0px;}
#c-dx{right:0px;}
</style>
</head>
<body>
<div id="w1">
<div id="w2">
<div id="c-sx"></div>
<div id="corpo"></div>
<div id="c-dx"></div>
</div>
</div>
</body>
</html>
stranamente però le due colonne laterali #c-sx e #c-dx prendono il 100% dell'altezza di #w2, ma come se tutto funzionasse (cioè come se #w1 avesse il 100% di body e #w2 il 100% di #w1).
non capisco che cosa succede
se aggiungo #w1,#w2{position:absolute;top:0;left:0;}
tutto funziona... ma non posso usare questa soluzione anche nel sito reale.
per ora ho risolto temporaneamente grazie a javascript, lo riporto in caso qualcuno volesse usarlo per risparmiarsi un mal di testa:
Codice PHP:var corpo = document.getElementById("corpo");
var offset = 265;
fullh(corpo);
window.onresize = function(){ fullh(corpo); }
function fullh(corpo){
hmin = (GetWindowSize())[1];
if(corpo.offsetHeight!==hmin) corpo.style.minHeight = (hmin-offset)+"px";
}
//questa funzione non è mia, ma non ricordo da dove l'ho copiata
function GetWindowSize() {
size = new Array;
size[0]=window.innerWidth||(document.documentElement.clientWidth||document.body.clientWidth);
size[1]=window.innerHeight||(document.documentElement.clientHeight||document.body.clientHeight);
return size;
}
Rispondi quotando