Hi there,

I'm new to this forum. I need help on how to maximize a table cell height.
First I have a table layout that has 3 rows, the first and third rows have fix 50px height.
I want to max the height of the of the 2nd row to fill the remaining space.

This works fine in firefox 2 but not in IE7. the height 100% in the ie 7 causes to overlap the body which cause to create a vertical scroll bar.

how should I do this. what would be the proper value for the 2nd row? I need help.

Also if you put a nested table in the 2nd row without row height define, the 100% height table won't stretch.

here's the code:


regards,

boyetp

Im not sure if I get what you are trying to say but to eliminate the verical scroll bar you can rotate the height of the body until it suits your needs. you can achieve that by decreasing the body height

don't use height:100%
<td style="width:100%;height:100%"> row 2 col 1</td>
use height:100px
<td style="width:100%;height:100px"> row 2 col 1</td>
and find the difference

Hi Traicey,

I really appreciate your replay. I already tried different percentage, the latter table is a layout and they are dynamically created based on how many gadgets/widgets that I'm going to put base on our xml cofiguration. This table can have tables inside the td.

So the table inside the table won't stretch through the length of the td.
Actually if I used quirks mode works fine but I don't want to go that route.

I really need help on this.

boyetp

Hi Arevelli,

I have to stretch this cell to fill up the remaining spaces.
This table can have tables inside the td.
So the table inside the table won't stretch through the length of the td.

regards,

boyetp

Why do you have CSS outside of head tag? It should be inside header tag or use inline option (inside the tag you wish to adjust with css)

Hi Peter,

I can move the styles into the header or use inline style with the same result.
This is just my test page.

boyetp

use this


instead of using height:96%;

This is the default value of the height. Then my table won't maximize the screen viewport.
I need to have my table maximize the viewport screen.

There is NO way to exactly fill a screen vertically that works on all browsers, screen resolutions, and viewport sizes.

- It's impossible to make a page that fits perfectly in the vertical direction on all monitors.

- It is impossible to place anything against the bottom edge of the screen.

The Internet is not designed to work that way. It is designed to expand pages downward as much as is necessary to fit the entire content served. Screen height and the bottom edge of the screen are undefined in Internet protocols.

You can choose among these possibilities:

1. Design your page for one screen resolution, and accept the fact that people with other screen resolutions are going to see either scroll bars or a smaller page in the upper left corner.

2. Design your page for the lowest resolution, and let the remainder of the screen be blank if a higher resolution monitor displays it.

3. Design your page to fit against the top of the screen, and expand to fit the width (which does work). Use a repeating background image to fill the rest of the screen downward.

4. You could try to wrestle with JavaScript functions intended to find the screen height. But they are not standardized across browsers, and are totally undefined on many browsers.

5. You could create an image containing the entire page, and then choose a display that fits the image to the window horizontally. It will then approximately fit vertically. But it won't work right on the new widescreen monitors. And you can't have any links on this page.