Question

我有两个div，position属性设置为absolute。其中一个是另一个可滚动div的儿子。这样的事情：

<body>
  <div class="foo" id="outside"></div>

  <div class="bar">
    <div class="foo" id="inside"></div>
  </div>
</body>

在CSS中：

.foo{position:absolute;}
.bar{max-width: 300px;}

现在，让我们说bar div有很长的内容，因此用户可以滚动它（只是div，而不是整个页面！）; inside div不会与父亲一起滚动。相反，outside div将滚动整个页面，如果它足够长以滚动。我希望inside div与bar div一起滚动，如何重现outside div上inside div的行为？

编辑：我再次阅读我的帖子，这不是那么简单，对不起。我将尝试一个例子：

http://jsfiddle.net/QYHSd/2/

当用户滚动绿色div时，我希望红色div与绿色内容一起滚动。如果我不能很好地解释我想要获得的内容，请再次抱歉。

Answer 1

将position: relative;添加到.bar。这将改变.foo上从body到.bar的绝对定位的上下文。

.bar {
    position: relative;
    max-width: 300px;
    height: 100px;
    overflow-y:scroll;
    overflow-x:hidden;
}

jsFiddled here

Answer 2

.bar {
max-width: 300px;
max-height: 300px;
overflow-y:scroll;
overflow-x:hidden;
}

这将使得即使div中没有内容也总会看到滚动条。如果您希望滚动条仅在需要时显示，请使用“自动”而不是“滚动”。

位置中的HTML元素：绝对与滚动

2 个答案: