页面滚动位置:固定内容

时间:2009-10-21 03:57:12

标签: css position fixed

我有一个顶部导航区域,位置:固定

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


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

我在考虑尝试:

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

#content {
overflow: scroll;
}

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

1 个答案:

答案 0 :(得分:0)

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

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

然后你的导航元素会有

#nav {
  position: fixed;
}

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