Stylesheets - Re: Filling the space between two absolute items with CSS

Author

Re: Filling the space between two absolute items with CSS

Chris Nelson

2007-01-30, 9:56 am

On Jan 26, 5:12 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-01-26, Chris Nelson <cnel...@nycap.rr.com> wrote:
> ... I want the menu area to
>
>You can use absolute positioning, something like this:
>
> #header, #menu, #footer
> {
> position: absolute;
> width: 15em;
> }
> #header
> {
> /* header is 15em high and starts at the top */
> top: 0;
> height: 15em;
> }
> #menu
> {
> /* menu runs from bottom of header to top of footer */
> top: 15em;
> bottom: 15em;
> }#footer
> {
> /* footer is 15em high and runs to the bottom */
> height: 15em;
> bottom: 0;
> }

Thanks but I realize now I wasn't clear about wanting the header and
footer to size to accommodate whatever is put in them (as the page is
loaded) and the menu to size and scroll to show whatever is put in it
(as the window is resized). What you gave me is three fixed-size
areas, right?

Ben C

2007-01-30, 9:56 am

On 2007-01-29, Chris Nelson <cnelson@nycap.rr.com> wrote:
> On Jan 26, 5:12 pm, Ben C <spams...@spam.eggs> wrote:
>
> Thanks but I realize now I wasn't clear about wanting the header and
> footer to size to accommodate whatever is put in them (as the page is
> loaded) and the menu to size and scroll to show whatever is put in it
> (as the window is resized). What you gave me is three fixed-size
> areas, right?

The header and footer were fixed height, the menu was variable height.

You can make the footer bottom:0 and height:auto, and you can make the
menu start below an auto height header just by making header and menu
normal-flow blocks (i.e. position:static). But I can't think of a way to
make the menu run from the bottom of an auto-height header to the top of
an auto-height footer fixed to the bottom of the viewport. Sounds like
you'd need a table for that, but setting the table height to 100% of the
viewport doesn't seem to be reliable.

Chris Nelson

2007-01-30, 9:56 am

On Jan 29, 12:57 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-01-29, Chris Nelson <cnel...@nycap.rr.com> wrote:
> ...
>
> You can make the footer bottom:0 and height:auto, and you can make the
> menu start below an auto height header just by making header and menu
> normal-flow blocks (i.e. position:static). But I can't think of a way to
> make the menu run from the bottom of an auto-height header to the top of
> an auto-height footer fixed to the bottom of the viewport. Sounds like
> you'd need a table for that, but setting the table height to 100% of the
> viewport doesn't seem to be reliable.

:-(

I played with something like this in an onload() block for the page:

var h = document.getElementById('header');
var m = document.getElementById('menubar');
var f = document.getElementById('footer');
m.style.position='fixed';
m.style.top = computedStyle(h, 'height');
m.style.bottom = computedStyle(f, 'height');

which worked as long as there was no padding in the header but when I
adeed padding the menubar overlays the bottom of the header by the
amount of the padding. I tried adding h.style.paddingTop but it seems
to be blank.

(computedStyle() is from http://javascript.stchur.com/index.php/a/
2006/06/21/p33, maybe there's a better way. The DOM inspector in
FireFox has the right height for the header but the computedStyle
doesn't.)

Ben C

2007-01-30, 9:56 am

On 2007-01-29, Chris Nelson <cnelson@nycap.rr.com> wrote:
> On Jan 29, 12:57 pm, Ben C <spams...@spam.eggs> wrote:
[snip]
>
>:-(
>
> I played with something like this in an onload() block for the page:
>
> var h = document.getElementById('header');
> var m = document.getElementById('menubar');
> var f = document.getElementById('footer');
> m.style.position='fixed';
> m.style.top = computedStyle(h, 'height');
> m.style.bottom = computedStyle(f, 'height');
>
> which worked as long as there was no padding in the header but when I
> adeed padding the menubar overlays the bottom of the header by the
> amount of the padding. I tried adding h.style.paddingTop but it seems
> to be blank.
>
> (computedStyle() is from http://javascript.stchur.com/index.php/a/
> 2006/06/21/p33, maybe there's a better way. The DOM inspector in
> FireFox has the right height for the header but the computedStyle
> doesn't.)

element.getComputedStyle is the standard function. Note that you get
strings out of it which have to be "parsed".

The whole thing is horrible though-- using tables for layout is nothing
like as bad as using JS.

This works in FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function convertHeight(h)
{
return new Number(h.substring(0, h.length - 2));
}

function setMenuHeight()
{
var header = document.getElementById("header");
var footer = document.getElementById("footer");
var menu = document.getElementById("menu");

var style = getComputedStyle(header, null);
var height = convertHeight(style.height);
menu.style.top = height + "px";

style = getComputedStyle(footer, null);
height = convertHeight(style.height);
menu.style.bottom = height + "px";
}

window.onload = setMenuHeight;
</script>
<style type="text/css">
div
{
position: fixed;
width: 10em;
}
#header
{
top: 0;
background-color: lavender;
}
#footer
{
bottom: 0;
background-color: pink;
}
#menu
{
overflow: scroll;
}
</style>
</head>
<body>
<div id="header">
header
<br>
header
</div>
<div id="menu">
menu
<br>
menu
</div>
<div id="footer">
footer
<br>
footer
</div>
</body>
</html>