Allocate "rest" of height to a div?

[Kai Grossjohann]

I have this:

<div style="width:10 0%;height:20px" >
bla
</div>
<div style="width:10 0%;height:???;o verflow:scroll" >
something
very
tall
so
that
it
produces
a
scrollbar
</div>
<div style="width:10 0%;height:50px" >
another stuff
</div>

The three question marks indicate what I want to put there. What I
want to say is "window height minus 20px minus 50px", but I don't know
how to say it.

My current workaround is to put some JavaScript before </body> which
calculates the height of the window in pixels, subtracts 75 from this
number (75 = 20 + 50 + fudge factor), then frobs the DOM of the
document to say "width:4711 px" instead of "width:???" .

The problem with this workaround is that the corresponding div doesn't
resize when the user resizes the window: while the divs get narrower
or wider properly when the user resizes the window, the middle one
doesn't get taller or --err, less tall?-- during the resizing.

On a whim, I also tried "width:90%" but that resulted in the div
growing as tall as the "something tall" inside it.
I hope I made it clear what I want. Flame away, if I didn't.

Suggestions?
Kai

[Anne van Kesteren]

Kai Grossjohann wrote:

I have this:

<div style="width:10 0%;height:20px" >
bla
</div>
<div style="width:10 0%;height:???;o verflow:scroll" >
something
very
tall
so
that
it
produces
a
scrollbar
</div>
<div style="width:10 0%;height:50px" >
another stuff
</div>

The three question marks indicate what I want to put there. What I
want to say is "window height minus 20px minus 50px", but I don't know
how to say it.
Only way is JavaScript AFAIK

My current workaround is to put some JavaScript before </body> which
calculates the height of the window in pixels, subtracts 75 from this
number (75 = 20 + 50 + fudge factor), then frobs the DOM of the
document to say "width:4711 px" instead of "width:???" .
You mean height:???;, right?

The problem with this workaround is that the corresponding div doesn't
resize when the user resizes the window: while the divs get narrower
or wider properly when the user resizes the window, the middle one
doesn't get taller or --err, less tall?-- during the resizing.

That is possible to detect using JS (the resizing part).
--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Vigil]

Can't you fix the bottom div to the bottom of the viewport so you don't
have to specify a height on the middle?

On Wed, 12 Nov 2003 19:15:18 +0100, Anne van Kesteren wrote:

The three question marks indicate what I want to put there. What I want
to say is "window height minus 20px minus 50px", but I don't know how to
say it.

Only way is JavaScript AFAIK

--

..

[Eric Bohlman]

Vigil <[e-mail] > wrote in
news:pa******** *************** *****@privacy.n et:

Can't you fix the bottom div to the bottom of the viewport so you
don't have to specify a height on the middle?

That causes more problems than it solves. If for whatever reason the
viewport isn't tall enough to display the entire page, then a fixed footer
will stick at the bottom of the viewport and content will scroll underneath
it.

[Kai Grossjohann]

Anne van Kesteren <ma**@annevanke steren.nl> wrote in message news:<bo******* ***@reader11.wx s.nl>...

Kai Grossjohann wrote:

The problem with this workaround is that the corresponding div doesn't
resize when the user resizes the window: while the divs get narrower
or wider properly when the user resizes the window, the middle one
doesn't get taller or --err, less tall?-- during the resizing.

That is possible to detect using JS (the resizing part).

How to detect this? Do I set a timer that checks every 400ms whether
the window has changed its size, or is there an event that fires when
the user resizes the IE/Mozilla/... window?

Kai

[Kai Grossjohann]

Vigil <[e-mail] > wrote in message news:<pa******* *************** ******@privacy. net>...

Can't you fix the bottom div to the bottom of the viewport so you don't
have to specify a height on the middle?

What does it mean to "fix [a] div to the bottom of the viewport"?

Kai

[Vigil]

Not if you make the middle scroll?

On Thu, 13 Nov 2003 02:56:01 +0000, Eric Bohlman wrote:

That causes more problems than it solves. If for whatever reason the
viewport isn't tall enough to display the entire page, then a fixed footer
will stick at the bottom of the viewport and content will scroll
underneath it.

--

..

[Anne van Kesteren]

Kai Grossjohann wrote:

That is possible to detect using JS (the resizing part).

How to detect this? Do I set a timer that checks every 400ms whether
the window has changed its size, or is there an event that fires when
the user resizes the IE/Mozilla/... window?

Kai

I think you need something like this:
<http://www.google.com/search?q=javasc ript+onresize> ;-)
--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Kai Grossjohann]

Anne van Kesteren <ma**@annevanke steren.nl> writes:

I think you need something like this:
<http://www.google.com/search?q=javasc ript+onresize> ;-)

Ah, it seems the JavaScript reference I'm using is incomplete...

Kai

[CJM]

"Vigil" <[e-mail] > wrote in message
news:pa******** *************** *****@privacy.n et...

Not if you make the middle scroll?

And how do you do that?