Ciao,
sto provando a realizzare un layout un pò complesso:
dovrebbe esserci un header con altezza fissa in px
un footer con altezza fissa in px
e un corpo di pagina composto da 4 colonnine che prendono tutta la restante altezza della finestra ognuna con una scrollbar separata.
con il codice seguente sono riuscito quasi ad impostare il layout solo che il DIV corpo prende il 100% della finestra desbordando quindi di 50px (altezza dell'header)
Sapete se è possibile fare in modo che il DIV corpo prenda il 100% dello spazio rimanente di pag? Come si faceva con le vecchie care tabelle
In alternativa devo settare header e footer in percentuale ma non mi piace avere un header di dimensioni variabili. Oppure pensavo che con un javascript potrei rilevare l'altezza in px della finestra e passare il valore al DIV corpo, cosa ne pensate?
Grazie
Giuseppe
body{
margin:0;
padding:0;
background-color:#FFF;
overflow:hidden;
}
#header{
position: fixed;
top:0;
left: 0;
height:50px;
overflow:hidden;
width:100%;
background:#FFFF00;
}
#corpo{
width:100%;
height:100%;
position:fixed;
overflow:auto;
top:50px;
left:0;
padding:0;
margin:0;
}
#leftcol{
width:30%;
position:relative;
float:left;
background-color: #D9D4B7;
margin:0;
text-align:left;
}
#maincol{
width: 70%;
position: relative;
background-color: #FAFFFF;
margin:0;
float:right;
text-align:left;
}
#footer{
position:fixed;
overflow:auto;
width: 80%;
height:5%;
}<body>
<div id="header" ></div>
<div id="corpo">
<div id="leftcol" >
</div>
<div id="maincol" >
</div>
</div>
<div id="footer"></div>
</body>
Rispondi quotando
