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

我想创建一个效果，我在页面上有一个小标题，始终保持在顶部可见，其次是可以上下滚动的页面的其余部分。创建一个相对定位的滚动div

当页面滚动时页眉滚动离开页面，这不是我想要的。我想让页面的第二部分成为一个滚动div，类似于this answer，但不幸的是，这种方法似乎要求我提前知道我的头部div的高度，而我不这样做 - 原因是它可能是高度将根据页面的宽度而改变，所以如果页面不够宽，则页眉部分会溢出到下一行。因为这个原因，绝对位置似乎也没有问题，因为我无法提前知道第二个div的位置 - 它应该刚好在第一个div后面出现，不管它在哪里，即相对位置但似乎绝对定位是制作可滚动div的诀窍的一部分。

那么我怎样才能实现相对于页面上的另一个元素使用CSS定位的滚动DIV？

来源

2013-08-28 Michael

位置与头元素：

position: fixed;

这将使“固定”相对于浏览器窗口，不管你有多少滚动。

来源

2013-08-28 18:40:45 zigdawgydawg

现在我的第二个div的开始覆盖 – Michael

您应该添加边距的第二个div等效于第一个div的高度的第一个div。例如'margin-top：100px;' – zigdawgydawg

第一个div的高度不固定。它可能因浏览器宽度而导致内容溢出或任何数量的其他事情发生变化。 – Michael

好吧，以@ 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>

来源

2013-08-28 19:16:10 Michael

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

回答

相关问题