Devi dare al primo div padre una larghezza e un'altezza con valore 100% in modo che quest'ultimo si adatti al genitore, poi dai la proprietà position relative sempre al div. Al div che vuoi posizionare in basso dai position:absolute con bottom:0 e left:0 e gli attribuisci delle dimensioni.
es:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>tabelle</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
text-align:center;
}
table {
table-layout:fixed;
border-collapse:collapse;
width:500px;/*esempio*/
}
table, table td {
border:solid 1px #000;
}
table #box {
position:relative;
width:100%;
height:100%;
}
table #box #posizionato {
position:absolute;
bottom:0;
left:0;
width:100%;/*esempio*/
height:20px;/*esempio*/
background:green;/*esempio*/
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="box">
Prima riga</p>
Seconda riga</p>
Terza riga</p>
<div id="posizionato"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Prova il codice a vedere su funziona.
Sono soluzioni laboriose queste, se la tua tabella non serve per contenere dati, opterei per un tipo di layout più semplice e privo di tabelle di impaginazione.
Fammi sapere.
Rispondi quotando
