Allocate "rest" of height to a div?

[Kai Grossjohann]

I have this:

<div style="width:100%;height:20px">
bla
</div>
<div style="width:100%;height:???;overflow:scroll">
something
very
tall
so
that
it
produces
a
scrollbar
</div>
<div style="width:100%;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:4711px" 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:100%;height:20px">
bla
</div>
<div style="width:100%;height:???;overflow:scroll">
something
very
tall
so
that
it
produces
a
scrollbar
</div>
<div style="width:100%;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:4711px" 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.annevankesteren.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.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?

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**@annevankesteren.nl> wrote in message news:<bo**********@reader11.wxs.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=javascript+onresize> ;-)
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Kai Grossjohann]

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

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

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

Kai

[CJM]

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

Not if you make the middle scroll?

And how do you do that?

[Kai Grossjohann]

"CJM" <cj*****@yahoo.co.uk> writes:

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

Not if you make the middle scroll?

And how do you do that?

<div style="overflow:scroll;...">...</div>

This will create scrollbars. But I /think/ that it is also necessary
to specify the height, otherwise the div will just grow to accomodate
its contents.

Which brings us back to square one where I asked how to specify the
height ;-)

Kai

[Anne van Kesteren]

Kai Grossjohann wrote:

"CJM" <cj*****@yahoo.co.uk> writes:

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

Not if you make the middle scroll?

And how do you do that?

<div style="overflow:scroll;...">...</div>

overflow:auto;

Is a better solution IMHO. Then it will only create scrollbars when they
are needed.

This will create scrollbars. But I /think/ that it is also necessary
to specify the height, otherwise the div will just grow to accomodate
its contents.

Which brings us back to square one where I asked how to specify the
height ;-)

Kai

--
Anne van Kesteren
<http://www.annevankesteren.nl/>