Html 具有一个固定和一个滚动的两列布局

我已经创建了一个两列布局

<div class="layout">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

我有两个小小的疑问：

当鼠标悬停在右边时，如何使右边的列只滚动

我怎样才能阻止右边的柱子奇怪地移动？我可以在列上方向上滚动创建一个空白（当在顶部时），或者分别在两侧向左/向右滚动创建空白。（注意：这个问题不会在JS Fiddle中重现，但在运行Safari的MacBook上很明显）

---

关键是将所有相关容器设置为

height:100%

，并将

overflow:auto

应用于要启用滚动的列。请参阅下面的简单演示，不需要div布局

html，body.col1.col2{
身高：100%；
}
身体{
保证金：0；
}
.col1、.col2{
宽度：50%；
}
.col1{
背景颜色：粉红色；
位置：固定；
左：0；
排名：0；
}
.col2{
背景颜色：银色；
左边距：50%；
溢出：自动；
}

1
2.
滚动试验

您好，谢谢您的回复-这解决了问题1！不幸的是，它并没有解决我所经历的奇怪的滚动。（更新JS小提琴：）。我可以在这里指给你看吗-。。。。在页面顶部时，如果尝试向上滚动，则两列都是静态的。我的情况不是这样。我想你说的是苹果橡皮筋/弹跳卷轴，你对此无能为力。在Firefox上试试，因为它没有。非常感谢你，这太棒了！