Page Scroll under position: fixed content [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

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.

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

来源：https://stackoverflow.com/questions/1598651/page-scroll-under-position-fixed-content