Click to See Complete Forum and Search --> : Html table dynamic height


doomsday123
September 19th, 2006, 11:20 AM
What im trying to do is to get this page to expand in height to the size of the client browser. I have the header, the menubar, and the footer a specific heights but I want the content part of the table to expand to the rest of the width of the page so it is always full screen in width. Here is my code, and if someone could help me figure it out would be great. Thanks.

<style>
html,body
{
margin:0;
height:100%;
cellpadding:0;
cellspacing:0;
}
</style>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="780">
<tr>
<td background="images/xcessivelayout_02.gif" height="231">&nbsp;</td>
</tr>
<tr>
<td background="images/xcessivelayout_04.gif" height="26">&nbsp;</td>
</tr>
<tr>
<td background="images/xcessivelayout_05.gif" height="100%">&nbsp;</td> <!-- THIS TD/TR NEEDS TO FILL THE REST OF THE HEIGHT OF THE PAGE -->
</tr>
<tr>
<td background="images/xcessivelayout_06.gif" height="26">&nbsp;</td>
</tr>
</table>
</center>
</div>

PeejAvery
September 19th, 2006, 11:38 AM
First of all, body and html do not have height properties.

Second, when declaring 100%, you can't use other heights in your TD because 100% is already in use. Simply make the whole table 100% and omit that TDs height.

<style>
html,body
{
margin:0;
cellpadding:0;
cellspacing:0;
}
</style>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="780" height=100%>
<tr>
<td background="images/xcessivelayout_02.gif" height="231">&nbsp;</td>
</tr>
<tr>
<td background="images/xcessivelayout_04.gif" height="26">&nbsp;</td>
</tr>
<tr>
<td background="images/xcessivelayout_05.gif">&nbsp;</td> <!-- omit this height table height will do the rest -->
</tr>
<tr>
<td background="images/xcessivelayout_06.gif" height="26">&nbsp;</td>
</tr>
</table>
</center>
</div>

doomsday123
September 19th, 2006, 01:43 PM
That worked. Thanks. Looks like i need to catch back up on my HTML :)

PeejAvery
September 19th, 2006, 04:28 PM
You're welcome. And don't forget your CSS. ;)