100% hög tabell?

1 svar · 238 visningar · startad av Okkido 27 sep. 2003

OkkidoMedlem sedan maj 20007 492 inlägg

27 sep. 2003 18:32#1

Hejsan, jag sitter och har ett litet problem. Jag har en sida uppbyggd med tabeller och css. Jag vill att sidan ska fylla ut hela höjden i webbläsaren.

table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:3px;heigt:100%;background-color:#989DA3;"></td>
<td style="width:1px;background-color:#575B60;"></td>
<td style="width:3px;background-color:#E7EBF0;"></td>
<td align="left" valign="top" style="width:600px;height:100%;background-color:#FFFFFF;"><table style="height:100%;width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:100px;">jk</td>
</tr>
<tr>
<td style="height:24px;">klö</td>
</tr>
<tr>
<td style="height:100%;">RAD ÖVER HELA</td>
</tr>
<tr>
<td style="height:24px;">klöl</td>
</tr>
</table> <p> </p></td>
<td style="width:3px;background-color:#E7EBF0;"></td>
<td style="width:1px;background-color:#575B60;"></td>
<td style="width:3px;background-color:#989DA3;"></td>
</tr>
</table>

Är koden jag har användt.

Jag vill att den raden där det står "RAD ÖVER HELA" ska fylla ut hela webbläsarutrymmet i höjd minus de 3 andra raderna som är på 100px, 24px och 24px.

Hur löser man detta?

Tack på förhand!

LBCMedlem sedan jan. 2003146 inlägg

27 sep. 2003 19:10#2

Tror det står en hel del om detta i diverse trådar, spana runt lite. Vad jag vet handlar det om att du måste sätta dina 100% i relation till något...ex till "bodyn". Har jag förstått det hela rätt bör koden nedan lösa ditt problem, däremot tror jag det kan ställa till problem i diverse webläsare, lite beroende på vilken Doctype du använder samt hur noga du är med att skriva korrekt html/xhtml.

<body style="height: 100%" topmargin="0px">

<table style="border: 0px; height: 100%" cellspacing="0"  cellpadding="0">
 <tr> 
 <td style="width:3px ;heigt:100%; background-color:#989DA3"></td> 
 <td style="width:1px; background-color:#575B60"></td> 
 <td style="width:3px; background-color:#E7EBF0"></td> 
 <td align="left" valign="top" style="width:600px; height: 100%; background-color:#FFFFFF;">

   <table style="height:100%;width:600px;" border="0" cellspacing="0" cellpadding="0"> 
   <tr><td style="height:100px;">jk</td></tr> 
   <tr><td style="height:24px;">klö</td></tr> 
   <tr><td style="height:100%;">RAD ÖVER HELA</td></tr> 
   <tr><td style="height:24px;">klöl</td></tr> 
   </table>
   <p></p>

 </td> 
 <td style="width:3px;background-color:#E7EBF0;"></td> 
 <td style="width:1px;background-color:#575B60;"></td> 
 <td style="width:3px;background-color:#989DA3;"></td> 
 </tr> 
</table>

</body>