Page Scroll under position: fixed content [closed]

Question

I have a top navigation area with position: fixed

I'd like the page content to scroll normally, but not disappear under the navigation. The main issue is when I do a search, (this is a full CMS with hundreds of results in different modules) what I'm searching for sometimes gets scrolled under the navigation. I'm ok with it because I know what's happening, but I'd like it to work well for my users. I suppose I could use a frameset, but is there another way?

---

I basically have what you typed up except I have a content div with margin-top: 50px. The problem is, the content div scrolls with the page so I have 50px of hidden content once the page starts to scroll. This is especially apparent if I do browser searches (Ctrl-F). I've solved the printing issue with a @print stylesheet removing the nav area, but I'd like to have the scrolling occur only below the nav.

I was thinking of trying:

body {
overflow: no-scroll; (or whatever the css is for this)
}

#content {
overflow: scroll;
}

This might get rid of the browser scroll-bar and only have one for the content area. Not sure how that will look. Still less than ideal. It'll probably look just like a frameset without the frameset annoyances.

Breannebrear

a sample page would help – Cheeky

Answer 1

May not be foolproof, but you could do

body {
  position: relative;
  top: <whatever height your navigation bar is>;
}

Then your navigation element would have

#nav {
  position: fixed;
}

Combined, this should bump everything under body down, except for those elements that have position: fixed or position: absolute.

Sloatman

This seems to only push the content down without preventing scroll-under. Still a neat idea. I've never thought about positioning the body element. – Breannebrear

What do you mean by "scroll-under"? – Sloatman