更改滚动行为以允许在较小的屏幕上查看固定元素

Question

我的页面中有一个固定的div，因为你知道如果div的高度高于浏览器的视口你最终得到一个div你不能滚动，因为滚动的背景而不是div（固定定位）。

所以我们说：

<div class="fixed">

</div>

---

.fixed {
    position: fixed;
    border: 1px solid #000;
    width: 200px;
    background-color: green;
}

如果您缩小预览页面高度，则可以在此处查看http://jsfiddle.net/n7b43s8a/1/，您可以看到无法滚动div。

bootstrap模式解决了这个问题，但是我不太明白他们是怎么做的，似乎带走了身体的卷轴并添加了一个新的spacer background div但是还不清楚。

以下是http://jsfiddle.net/RLQhh/750/

的示例

你看，即使身高很小，你也可以滚动div。

他们是怎么做到的？

Answer 1

关键是overflow。将overflow: hidden添加到正文，将overflow: auto添加到.fixed。

当然，这假设您的固定容器在某种程度上限制了高度，因为它默认会拉伸到其内容高度。

请参阅http://jsfiddle.net/456vashr/以获取示例

Answer 2

在Bootstrap示例中;他们使用position:relative作为他们的固定div。您需要将position:fixed更改为position:relative。