Re: Fixed "frame" at top, main text doesn't flow under it

Giganews Newsgroups
Subject: Re: Fixed "frame" at top, main text doesn't flow under it
Posted by:  Ben C (spamspam@spam.eggs)
Date: Tue, 30 Sep 2008

On 2008-09-30, Stan Brown <the_stan_bro…@fastmail.fm> wrote:
> I've searched Google and the group archives, and came up empty, but
> maybe I just haven't selected the right search term.
>
> This concerns only the screen -- printing isn't an issue.  I'm also
> not concerned about the appearance of the page in IE6 as long as the
> page is still usable.
>
> I want to have two pseudo-frames, using only CSS and no JS.  The top
> "frame", 4em high, is a menu, and I want it to stay at the top of the
> viewport.  The rest of the page is the text.  The menu items all
> point to various anchors, <h2 id-...> and similar, in the page.
>
> I've got the menu in place using position:fixed.  And using a
> padding-top, I have the text starting below the menu. But as soon as
> I scroll the text it slides under the menu, and when I click a link
> in the menu the anchor text is a the top of the viewport, under the
> window.
>
> Is there a way to set up these pseudo-frames, or can I truly not do
> it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

    .frame
    {
        position: absolute;
        left: 0;
        right: 0;
        overflow: scroll;
    }
    .top
    {
        top: 0;
        height: 4em;
    }
    .main
    {
        top: 4em;
        bottom: 0;
    }

....

<div class="frame top">
</div>

<div class="frame main">
</div>

Replies

In response to

Fixed "frame" at top, main text doesn't flow under it posted by Stan Brown on Tue, 30 Sep 2008