Member Avatar for boyetp

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
html, body{
	height:96%;
}
		
body{
	border: 1px solid red;
}
</style>

<body>
<table border="1" cellspacing="5" cellpadding="5" style="height:100%; width:100%">
<tr>
<td style="width:100%;height:50px"> row 1 col 1</td> 
</tr>
<tr>
<td style="width:100%;height:100%"> row 2 col 1</td> 
</tr>
<tr>
<td style="width:100%;height:50px"> row 3 col 1</td> 
</tr>
</table>		
		
</body>
</html>

regards,

boyetp

  • 7 Contributors
  • 12 Replies
  • 428 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by kashinathn
Member Avatar for Traicey

the height 100% in the ie 7 causes to overlap the body which cause to create a vertical scroll bar.

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

<style>
html, body
{
height:50%;
}
Member Avatar for aravelli

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

Member Avatar for 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

<style>
html, body
{
height:50%;
}

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

Member Avatar for boyetp

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 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

Member Avatar for peter_budo

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)

Member Avatar for 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

Member Avatar for aravelli

use this

html, body{
	height:auto;
        }

instead of using height:96%;

Member Avatar for boyetp

use this

html, body{
    height:auto;
}

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.

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for MidiMagic

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.

Member Avatar for gutao

Hello.. I'm brazilian and my english is not good.. sorry some words..
I registered in the site only to help you. :)

this is your code bellow.. I just insert the class "myclass". and I dont tested it, but I think its not necessary. try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
body{
border: 1px solid red;
}
.myclass {
height: 100%;
}
</style>
<![if IE]>
<style>
.myclass { height: expression(document.body.clientHeight-100); } // the full height size of document minus 50px of top cell and minus 50px of bottom cell.
</style>
<![endif]>
<body>
<table border="1" cellspacing="5" cellpadding="5" style="height:100%; width:100%">
<tr>
<td style="width:100%;height:50px"> row 1 col 1</td>
</tr>
<tr>
<td style="width:100%" class="myclass"> row 2 col 1</td>
</tr>
<tr>
<td style="width:100%;height:50px"> row 3 col 1</td>
</tr>
</table>
</body>
</html>

if browser isnt Internet Explorer, the class "myclass" height ll be: "100%", else the class "myclass" ll be replaced to the code between "<![if IE]>" and "<![endif]>".

I hope I have helped.

bye friend.

Gutao from Brazil :)

Member Avatar for gutao

hello.. sorry my mistake... I tested now:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
.myclass {
height: 100%;
}
</style>
<![if IE]>
<style>
.myclass { height: expression(document.body.clientHeight-100) + "px"; } // the full height size of document minus 50px of top cell and minus 50px of bottom cell. (excuse my mistake. I forgot in the last code to add " + 'px'"
</style>
<![endif]>
<body>
<table border="1" cellspacing="5" cellpadding="5" width="100%" height="100%">
<tr>
<td style="width: 100px; height: 50px"> row 1 col 1</td>
</tr>
<tr>
<td style="width: 100px" class="myclass"> row 2 col 1</td>
</tr>
<tr>
<td style="width: 100px; height: 50px" height="50px"> row 3 col 1</td>
</tr>
</table>
</body>
</html>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.