Filling remainder of height

This should be simple, but I can't get it to work so I know that I'm
overlooking something.

I have an element that has height="100%". Nested inside of this
element, I have 3 more elements.

If the height of the first 2 elements are set dynamically, then how do
I make the 3rd element fill up the remaining height? Setting it to
height="100%" used to work on older browsers, and still works on IE8,
but not on FF.

TIA,

Jason

In article
<f3d46598-86e4-4402-a1ea-9cdfaad9c62a (AT) z41g2000yqz (DOT) googlegroups.com>,
Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

This should be simple, but I can't get it to work so I know that I'm
overlooking something.

I have an element that has height="100%".

100% of what?

URL?

--
dorayme

Jason Carlton wrote:

This should be simple, but I can't get it to work so I know that I'm
overlooking something.

I have an element that has height="100%". Nested inside of this
element, I have 3 more elements.

If the height of the first 2 elements are set dynamically, then how do
I make the 3rd element fill up the remaining height? Setting it to
height="100%" used to work on older browsers, and still works on IE8,
but not on FF.

Set a Strict DOCTYPE, and with the meta tag which tells IE8 to render
code properly (i.e. <meta http-equiv="X-UA-Compatible" content="IE=8">),
and I'll bet that IE8 does it "wrong" too.

On 06 Nov 2009, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

This should be simple, but I can't get it to work so I know that I'm
overlooking something.

I have an element that has height="100%". Nested inside of this
element, I have 3 more elements.

If the height of the first 2 elements are set dynamically, then how
do I make the 3rd element fill up the remaining height? Setting it to
height="100%" used to work on older browsers, and still works on IE8,
but not on FF.

"Fill up the remaing height" by setting the 3rd nested element to
height="100%"?? Hell, I can't see that working even in ie1 beta! If
it really does/did "work" as you say, I *know* I'm in Lala land and all
this is the work of the demon-women I scorned in my hunk years.

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.

Of course.... which is what I'm asking. Maybe I worded the thread
incorrectly?

On 06 Nov 2009, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.


Of course.... which is what I'm asking. Maybe I worded the thread
incorrectly?

Actually, you "worded the thread" just fine if you mean the subject of
your original post. It's the rest of the text that is dubious.

'I have an element that has height="100%".'...

What element? Body, div, form...? Anyway, eventually you reply to
someone and voila! - it's a table! Pragmatically, it's *all* tables -
a nested-table layout. And that, my friend, is what is wrong.

Using tables for layout, while frowned upon by some, isn't
uncategorically an error, but it should be in a fairly simple context
and there are usually better ways to do it, anyway. OTOH, using
*nested* tables for layout wherein the rendered height of any or all is
critical to the layout itself is an absolute blunder, and we haven't
even gotten into doctypes yet!

Yes, I know, it used to work fine... Unfortunately, though, in order
for it to work fine today, you will have to dump the tables and
redesign the page using standardized markup and styles more germane to
the third millenium.

I'm not trying to insult you here but I *am* trying to convince you
that the solution to the problem, the only real solution, is to bring
your page up to date and up to snuff with current methods. Anything
less will simply not function as desired for the bulk of Internet users
regardless of whether the bulk of yours use old browsers or not.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

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

This should be simple, but I can't get it to work so I know that I'm
overlooking something.

It isn't as simple as it probably should be.

I have an element that has height="100%". Nested inside of this
element, I have 3 more elements.

If the height of the first 2 elements are set dynamically, then how do
I make the 3rd element fill up the remaining height? Setting it to
height="100%" used to work on older browsers, and still works on IE8,
but not on FF.

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.

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.

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?

On Nov 7, 5:01*am, Neredbojias <neredboj... (AT) gmail (DOT) com> wrote:

On 06 Nov 2009, Jason Carlton <jwcarl... (AT) gmail (DOT) com> wrote:

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.

Of course.... which is what I'm asking. Maybe I worded the thread
incorrectly?

Actually, you "worded the thread" just fine if you mean the subject of
your original post. *It's the rest of the text that is dubious.

'I have an element that has height="100%".'...

What element? *Body, div, form...? *Anyway, eventually you reply to
someone and voila! - it's a table! *Pragmatically, it's *all* tables -
a nested-table layout. *And that, my friend, is what is wrong.

Using tables for layout, while frowned upon by some, isn't
uncategorically an error, but it should be in a fairly simple context
and there are usually better ways to do it, anyway. *OTOH, using
*nested* tables for layout wherein the rendered height of any or all is
critical to the layout itself is an absolute blunder, and we haven't
even gotten into doctypes yet!

Yes, I know, it used to work fine... *Unfortunately, though, in order
for it to work fine today, you will have to dump the tables and
redesign the page using standardized markup and styles more germane to
the third millenium.

I'm not trying to insult you here but I *am* trying to convince you
that the solution to the problem, the only real solution, is to bring
your page up to date and up to snuff with current methods. *Anything
less will simply not function as desired for the bulk of Internet users
regardless of whether the bulk of yours use old browsers or not.

--
Neredbojiashttp://www.neredbojias.org/http://www.neredbojias.net/

That doesn't really make sense to me. I don't know of any styling that
can be added to a DIV tag that can't be added to a table, so it
doesn't seem logical to just drop the tables and make older browsers
inoperable, if it's not necessary.

But for the sake of discussion, let's just assume that this is the
code that I'm using:

<body style="height: 100%">

<div style="width: 100%; height: 100%; padding: 10px; border: 1px
solid #000000">
<span style="width: 33%; height: 100%; padding: 5px; border: 1px
solid #000000">Test</span>

<span id="MIDDLE" style="width: 33%; height: 100%; padding: 5px;
border: 1px solid #000000">
<div style="border: 1px solid #000000">Test</div>
<div style="border: 1px solid #000000">Test</div>
<div id="HERE" style="border: 1px solid #000000">Test</div>
</span>

<span style="width: 33%; padding: 5px; height: 100%; border: 1px
solid #000000">Test</span>
</div>


In the 2nd SPAN (id="MIDDLE"), how would I let the first two DIV
elements determine their height based on the content, and then have
the third DIV element (id="HERE") to fill up the remaining height?

On 07 Nov 2009, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

That doesn't really make sense to me. I don't know of any styling
that can be added to a DIV tag that can't be added to a table, so it
doesn't seem logical to just drop the tables and make older browsers
inoperable, if it's not necessary.

But for the sake of discussion, let's just assume that this is the
code that I'm using:

body style="height: 100%"

div style="width: 100%; height: 100%; padding: 10px; border: 1px
solid #000000"
span style="width: 33%; height: 100%; padding: 5px; border: 1px
solid #000000">Test</span

span id="MIDDLE" style="width: 33%; height: 100%; padding: 5px;
border: 1px solid #000000"
div style="border: 1px solid #000000">Test</div
div style="border: 1px solid #000000">Test</div
div id="HERE" style="border: 1px solid #000000">Test</div
/span

span style="width: 33%; padding: 5px; height: 100%; border: 1px
solid #000000">Test</span
/div


In the 2nd SPAN (id="MIDDLE"), how would I let the first two DIV
elements determine their height based on the content, and then have
the third DIV element (id="HERE") to fill up the remaining height?

As the dinosaur said to the proto-mammal:

ARRRGHHH!!!

For one thing, you can't put divs in spans. But...let's continue on
with a more positive note. Check-out the following link and see if
that's what you want. I'm not really 100% sure.

http://www.neredbojias.org/_dems/dem6.html

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

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.

Thanks for your help, Ben,

Jason