html - 正确固定位置，以便页面上 4 个元素中的 3 个不会随着滚动而移动

Question

我有一个在这个 JS Fiddle 中模拟的页面.

该页面有一个标题栏、一个侧边栏、一个时间轴和一个名为days的div>

应该滚动的唯一是days。

我在正确定位类型方面遇到了问题，因此 title bar、sidebar 和 timeline 保持 100% 固定为用户滚动 .days。

任何帮助将不胜感激

Answer 1

嗯，在这种情况下，我不确定 position:fixed 实际上是解决问题的最简单方法。我认为问题实际上出在元素的高度上。

包裹所有元素的.container高度为300px。但是，.days 没有定义高度；因此，即使您指定了 overflow-y:scroll，它也不会真正滚动 - 相反，它只会扩展到显示所有内容所需的高度。这不是很明显，因为 .container 上的 overflow:hidden 会导致 .days 的额外高度被隐藏。

在 .days 上指定高度应该可以满足您的需求。但究竟是多高呢？好吧，我假设您希望 .days 的底部与 .sidebar 的底部相同，后者的高度为 250px。由于 .timeline(.days 之上)的高度为 12px，那么您需要的高度为 250px - 12px = 238px。

在您的 CSS 定义中，只需添加以下样式:

.days {
    height: 238px;
}

这应该让您滚动 .days 的内容，而无需移动其周围元素的位置。

这是一个 updated JSFiddle展示。希望这可以帮助!如果您有任何问题，请告诉我。