Filling remainder of height

On Nov 8, 4:41*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2009-11-07, Jason Carlton <jwcarl... (AT) gmail (DOT) com> wrote:



No, that's not supposed to work. Height: 100% is supposed to mean, 100%
of the container, not of what's left of the container after other stuff
has gone in.

Yeah, I always knew that this was a workaround, but it worked on all
major browsers (until now) so I didn't care.

You can do this with tables-- just use an outer table that's height:
100% (also set html and body to height: 100%) with two auto height rows
for the first two things, and one more row for the last thing, also auto
height.

But, you can't rely on making the contents of cells in that last row
height: 100%. Absolute positioning would work (top: 0 and bottom: 0 with
position: relative on the table cell) but not in FF as it doesn't allow
table cells to be containing blocks for positioned descendents.

I gotcha. I might have to make a single table in the background that's
100% with all of the stylings, then place another table inside of that
with the content and no styling.

To do all this without tables, there are various ways of faking the same
effect, but it depends exactly what you want-- what has backgrounds and
what has borders in all this?

The top table has no background or borders, the second has a
background image, and the third has a background color and a left,
right, and bottom border.

So are you saying we need a table at the bottom, that completely fills
the remaining height?

I can't see a way to do that reliably. The only way I can think of
still involves using table cells as containers for postioned descendents
which doesn't work in FF.

Are these real tables, or just layout tables? If the latter, if you
explain the layout you want, there might be a completely different way
of achieving it, or something close to it.

Thanks for the help, Ben.

For anyone reading this in the future, I found a way to render this
correctly, using Javascript. I know that's not exactly appropriate for
an HTML newsgroup, but since there doesn't appear to be a way to do it
using pure HTML then I hope you'll forgive me.

I've checked this with IE 5.5 - 8.0, and FF 3.5, and it works fine. It
may not work correctly in older versions of FF, though.

<table width="100%" height="100%" id="container">
<tr>
<td>
<table height="100%">
<tr>
<td>Test</td>
</tr>
</table>
</td>

<td>
<table id="firstTable">
<tr>
<td>Test</td>
</tr>
</table>

<table id="secondTable">
<tr>
<td>Test</td>
</tr>
</table>

<script language="Javascript">
<!--

if (document.documentElement.clientHeight) {
var mainHeight = document.getElementById
("container").clientHeight;
var firstHeight = document.getElementById
("firstTable").clientHeight;
var secondHeight = document.getElementById
("secondTable").clientHeight;

var thisHeight = container - firstHeight - secondHeight;

document.write("<table height='" + thisHeight + ">");
}

else document.write("<table height='100%'>");

// -->
</script>
<noscript><table height="100%"></noscript>

<tr>
<td>Test</td>
</tr>
</table>
</td>

<td>
<table height="100%">
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>


The logic is to use Javascript to determine the height of the
container, then find the height of the first 2 tables that are nested.
Subtract those heights from the height of the container, and you'll
have determined the necessary height for the third table.

On 2009-11-08, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

On Nov 8, 4:41*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
So are you saying we need a table at the bottom, that completely fills
the remaining height?

I can't see a way to do that reliably. The only way I can think of
still involves using table cells as containers for postioned descendents
which doesn't work in FF.

Are these real tables, or just layout tables? If the latter, if you
explain the layout you want, there might be a completely different way
of achieving it, or something close to it.

Thanks for the help, Ben.

For anyone reading this in the future, I found a way to render this
correctly, using Javascript. I know that's not exactly appropriate for
an HTML newsgroup, but since there doesn't appear to be a way to do it
using pure HTML then I hope you'll forgive me.

I feared you might go down this path. It leads to the dark side, but
what are you gonna do.

[...]

The logic is to use Javascript to determine the height of the
container, then find the height of the first 2 tables that are nested.
Subtract those heights from the height of the container, and you'll
have determined the necessary height for the third table.

Yup, just too easy.