创建一个相对定位的滚动div

时间:2013-08-28 18:38:28

标签: css html position

我正在尝试创建一种效果,我在页面上有一个小标题,始终在顶部可见,然后是页面的其余部分,可以向上和向下滚动。

当页面滚动时,页眉会滚动页面,这不是我想要的。我想让页面的第二部分成为滚动div,类似于this answer,但不幸的是,这种方法似乎要求我提前知道我的标题div的高度而我不知道 - 原因是高度可能会根据页面的宽度而变化,因此如果页面不够宽,标题的一部分将溢出到下一行。由于这个原因绝对位置似乎也是不可能的,因为我无法提前知道第二个div的位置 - 它应该在第一个div之后,无论它在哪里,即相对位置但似乎绝对定位是制作可滚动div工作技巧的一部分。

那么如何才能使用CSS实现相对于页面上另一个元素定位的滚动DIV?

2 个答案:

答案 0 :(得分:3)

将标题元素放在:

position: fixed;

无论你滚动了多少,这都将使其相对于浏览器窗口“固定”。

答案 1 :(得分:1)

好的,以@ zigdawgydawg的答案为灵感,我发现这段代码可以正常使用。

<!doctype html><html style="height:98%;">
<body style="height:100%;">
<div> ... contents of first div ... </div>
<div style="position:fixed; overflow:auto; height: 100%;">
... 
contents of second div 
...
</div>
</body></html>