页面滚动位置：固定内容

Question

我有一个顶部导航区域，位置：固定

我希望页面内容能够正常滚动，但不会在导航下消失。主要问题是当我进行搜索时（这是一个完整的CMS，在不同模块中有数百个结果）我正在搜索的内容有时会在导航下滚动。我很好，因为我知道发生了什么，但我希望它对我的用户有效。我想我可以使用一个框架集，但还有另一种方法吗？

---

我基本上有你输入的内容，除了我有一个内容div与margin-top：50px。问题是，内容div与页面一起滚动，因此一旦页面开始滚动，我就有50px的隐藏内容。如果我进行浏览器搜索（Ctrl-F），这一点尤其明显。我用@print样式表解决了打印问题，删除了导航区域，但是我想让滚动只在导航下面进行。

我在考虑尝试：

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

#content {
overflow: scroll;
}

这可能会删除浏览器滚动条，并且只有一个用于内容区域。不知道那会怎样。还是不太理想。它可能看起来就像没有框架组烦恼的框架集。

Answer 1

可能不是万无一失，但你可以做到

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

然后你的导航元素会有

#nav {
  position: fixed;
}

综合起来，除了那些body或position: fixed的元素外，这会使position: absolute下的所有内容都崩溃。