2

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.

casperOne
  • 73,706
  • 19
  • 184
  • 253
Stephane
  • 1,613
  • 5
  • 20
  • 40

1 Answers1

0

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.

Seph
  • 328
  • 2
  • 4