a way to stretch only the BOTTOM table cell to fill 100% page height?

Forum Moderators: open

Message Too Old, No Replies

a way to stretch only the BOTTOM table cell to fill 100% page height?

deepseacreatures

7:32 am on Sep 11, 2007 (gmt 0)

I'm trying to get a table to fill 100% of my page height. It does this with a 100% height attribute in CSS, but it's a 3-row table and so what this does when it stretches it out is that it spreads all of my content apart across the height of the page. I just want it to extend the bottom cell of my table to reach that 100% height (there's a background image). Any way to do this without rewriting the whole thing in CSS from scratch?

Thanks.

Marshall

9:35 am on Sep 11, 2007 (gmt 0)

Can you post relevant CSS and HTML?

Marshall

Xapti

2:55 pm on Sep 11, 2007 (gmt 0)

Sounds simple to me.
Keep your height:100% on your table, and specifically set height of the top 2 rows, so that they take up whatever space you want it to, and have the 3rd take up the rest.

Also contemplate on whether you really even need to use tables, over just using styled divs.

puremetal

10:25 pm on Sep 11, 2007 (gmt 0)

Xapti, it didn't seem to work when i tried finding a solution this afternoon.

i tried this:

<table width="100px" height="100%" cellspacing="0">
<tr>
<td height="20ox" bgcolor="#3333FF">cell 1 </td>
</tr>
<tr>
<td height="20px" bgcolor="#990066">cell 2 </td>
</tr>
<tr>
<td height="100%" bgcolor="#CC3366">cell 3 </td>
</tr>
</table>

Dreamweaver seems to think it works, but it doesn't in browsers.

penders

12:17 pm on Sep 12, 2007 (gmt 0)

height="20px"

When you specify a pixel value in an HTML attribute, don't use any units (ie. 'px', or even 'ox'?!). You only use 'px' in CSS.

Should read:

height="20"

Although this might work in real world browsers, it is worth bearing in mind that it's not standards compliant, as there is no height attribute on TD elements, only on the TABLE element.

vincevincevince

12:18 pm on Sep 12, 2007 (gmt 0)

style="height:100%!important" on the final <tr>. Space before the "!"

puremetal

11:41 am on Sep 13, 2007 (gmt 0)

lol the "ox" was a typo... thanks, good to know :-)

Xapti

1:36 pm on Sep 13, 2007 (gmt 0)

I was quite sure heights coudln't be validly assigned to cable cells, but I thought browsers would render them anyways. Also deepseacreatures, I never said to give height:100% to the last TD. It should be left ot a default to take up the remaining space. 100% height would be conflicting, since the space available after the two first rows is already less than or equal to (depending on margins and borders) 100%-40px.
You can try that, and if that doesn't work, just use divs, since that's what you should be using for layout; tables is for tabular data.

Div setup would be pretty straightforward... have a container div with height:100%, then two more divs with a fixed height inside the container div. The third section will just be the remainder of the container div.