variable height header... body fills remaining height?

Seems simple enough yet I can't seem to accomplish it in CSS.

I want a header area in where the height can vary..
Below that I want an area that fills the remaining area.

What's the trick?
Easily done with a table...

Many thanks in advance,
Brad

bkfake-google (AT) yahoo (DOT) com wrote in news:1112796334.353360.127940
@z14g2000cwz.googlegroups.com:

Seems simple enough yet I can't seem to accomplish it in CSS.

I want a header area in where the height can vary..
Below that I want an area that fills the remaining area.

div.header { height: 10%; }
div.body { height: 80%; }

or something like that?

--
Arctic Fidelity <spam (AT) sacrificumdeo (DOT) net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

So, let me see if I've got this right. You want a header:

<h1>lalalalalala</h1>

That the box will scale as needed, and under that, you also want an
area of content (I assume) that fills up the remaining area of the
view-port?

Arctic Fidelity was 90% right:

div.header { height: 10%; }
div.body { height: 80%; }

really only needs to be:

..contentArea { height: 80% }

You can just use a header tag for a header and let the browser handle
any resizing of the box there.

almost, but not quite..
that assumes I know the "header" area is X% high
I don't know the header's content's height

In this current problem this header area displays the levels of
navigation
in a
level1
level2
.....
type format

I don't know how many lines will be there, what each lines line-height
will be, etc...

bkfake-google (AT) yahoo (DOT) com wrote in news:1112813364.799280.315770
@f14g2000cwb.googlegroups.com:

almost, but not quite..
that assumes I know the "header" area is X% high
I don't know the header's content's height

In this current problem this header area displays the levels of
navigation
in a
level1
level2
....
type format

I don't know how many lines will be there, what each lines line-height
will be, etc...

Then this shouldn't be a problem at all, if I know what you're talking
about. If you have a div that is set as the header, or even leave them
out of their own division, any height that they have, so long as they
are set, or computed automatically (the default, IIRC) then the rest of
the body will fill the page. You only have to explicitly state the
vertical heights of objects if you specifically want a certain height,
normally this is all calculated automatically.

<div class="header">
<h1>Something</h1>
<h2>Something else</h2>
</div>
[insert body here...]

If that is all you are looking for...which you seem to be saying, the
"header" will of course scale to the proper height of h1 and h2. But I
think you already know this, so I'm a bit confused....


--
Arctic Fidelity <spam (AT) sacrificumdeo (DOT) net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

"Nathan" <nathan.degruchy (AT) gmail (DOT) com> wrote in news:1112800219.604713.262150
@l41g2000cwc.googlegroups.com:

div.header { height: 10%; }
div.body { height: 80%; }

really only needs to be:

.contentArea { height: 80% }

You can just use a header tag for a header and let the browser handle
any resizing of the box there.

I would think that in the case of such, you would rather want to
specify the percentage for the header, and not for the body. I can't
seem to find any difference, but I'm wondering if it must just be more
reliable in buggy browsers or such, to have the header specified
explicitly rather than the body?

--
Arctic Fidelity <spam (AT) sacrificumdeo (DOT) net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

the problem is that I'd like to have an object/embed/iframe or any
number of things in the "body" occupy height=100%
or simply have a border around the "body"..
could have a column layout in the body that needs background
color/image to extend to bottom...

<DIV style="position:absolute; height:400px; width:400px;">
<DIV>
"header"
we don't know how high
could be
</DIV>
<DIV>
"body"
this should take up remaining space
<DIV style="position:absolute; bottom:0px;">
want at bottom of the 400px square
yes, I know this could/should go inside the outter div..
just trying to illustrate
</DIV>
</DIV>
</DIV>

"BKDotCom" <bkfake-google (AT) yahoo (DOT) com> wrote in
news:1112821964.670201.295380 (AT) g14g2000cwa (DOT) googlegroups.com:

the problem is that I'd like to have an object/embed/iframe or any
number of things in the "body" occupy height=100%
or simply have a border around the "body"..
could have a column layout in the body that needs background
color/image to extend to bottom...

DIV style="position:absolute; height:400px; width:400px;"
DIV
"header"
we don't know how high
could be
/DIV
DIV
"body"
this should take up remaining space
DIV style="position:absolute; bottom:0px;"
want at bottom of the 400px square
yes, I know this could/should go inside the outter div..
just trying to illustrate
/DIV
/DIV
/DIV

Hmm, I'm still not sure I quite get what you're getting at. Anything
you put in the body div will remain encapsulated inside that tag and
its dimensions so long as you don't go and do any absolute positioning.
Relative positioning should work fine. Specifying height:100%; inside
a tag means the height of that parent tag, and not the height of the
entire page.

--
Arctic Fidelity <spam (AT) sacrificumdeo (DOT) net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

I realize it'll take the height of the parent tag...that's the problem
( I want height-child#1 )
if the parent has two children how do I get them to fill entire parent?
no height:20% / height 80% stuff..
I don't want to specify child #1... it's height is dictated by the
content.