Dunque sto facendo diverse prove su un layout float di base, in quanto mi sto avvicinando al layouting 100% tablefree (così posso tirarmela con amici e colleghi :P) ma zoppico su una questione credo abbastanza basilare. Prima di tutto ecco qui il mio codicillo:
codice:
//STILE
* {
padding:0;
margin:0;
}
html {height:100%;}
body {height:100%;}
div#Container {height:100%;}
div#Header {height:140px;}
div#Body {height:100%;}
div#Footer {height:60px;}
//HTML
<body>
<div id="Container">
<div id="Header">
<h1>Header</h1>
</div>
<div id="Body">
Loren Ipsum
</div>
<div id="Footer">
<h3>Footer</h3>
</div>
</div>
</body>
Il problema consiste nel fatto che il div "Body" è si al 100% della pagina, ma non mi tiene conto delle dimensioni di header e footer, quindi la dimensione totale è di 100% della schermata + altezza header + altezza footer.
Quello che vorrei ottenere è quello che nei tempi passati si otteneva con
codice:
<body>
<table height=100%>
<tr>
<td height=140></td>
</tr>
<tr>
<td height=100%></td>
</tr>
<tr>
<td height=60></td>
</tr>
</table>
</body>
il codice l'ho buttato giù alla veloce ma di sicuro capirete il concetto
inoltre sono alla ricerca di qualche buon articolo di referenza per rendere il mio codice CSS cross-browser, e per ora non ho trovato nulla di valido: consigli?