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

re: variable height header... body fills remaining height?

bkfake-google@yahoo.com wrote in news:1112796334.353360.127940
@z14g2000cwz.googlegroups.com:
[color=blue]
> 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.[/color]

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

or something like that?

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

re: variable height header... body fills remaining height?

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:
[color=blue]
> div.header { height: 10%; }
> div.body { height: 80%; }[/color]

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.

re: variable height header... body fills remaining height?

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...

re: variable height header... body fills remaining height?

bkfake-google@yahoo.com wrote in news:1112813364.799280.315770
@f14g2000cwb.googlegroups.com:
[color=blue]
> 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...[/color]

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@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

re: variable height header... body fills remaining height?

"Nathan" <nathan.degruchy@gmail.com> wrote in news:1112800219.604713.262150
@l41g2000cwc.googlegroups.com:
[color=blue][color=green]
>> div.header { height: 10%; }
>> div.body { height: 80%; }[/color]
>
> 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.[/color]

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@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

re: variable height header... body fills remaining height?

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>

re: variable height header... body fills remaining height?

bkfake-google@yahoo.com wrote:[color=blue]
>
> I want a header area in where the height can vary..
> Below that I want an area that fills the remaining area.[/color]

<body>
<div>header</div>
<div>content</div>
</body>

If you do no special styling, the header will expand and contract as
needed and the content will take the rest of the canvas. So, do nothing
and you'll get your wish. :)

I suspect, however, that there is more to it than that and you just
haven't mentioned what your real expectations are. Are there different
backgrounds, images, or someting else involved? Please be specific. A
mock-up might be helpful.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

re: variable height header... body fills remaining height?

"BKDotCom" <bkfake-google@yahoo.com> wrote in
news:1112821964.670201.295380@g14g2000cwa.googlegr oups.com:
[color=blue]
> 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>[/color]

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@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

re: variable height header... body fills remaining height?

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.