Javascript 调整浏览器大小会导致div滚动

我正在尝试制作一个视差滚动网站，其模板如下：

HTML

<div id="content">
  <div id="container1"></div>
  <div id="container2"></div>
  <div id="container3"></div>
</div>

问题：如果向下滚动到#container2或#container3并调整浏览器大小，则网站会显示滚动

我怀疑高度：100%；正在引发问题。特别是，调整大小会导致所有三个容器都调整大小，从而产生奇怪的偏移

我尝试过的事情：

• 绑定调整大小事件并动态更改div的高度
• 添加“最小高度”属性，以便调整大小后锁定调整大小
• 隐藏不再在视图中的div

---

有什么简单的方法可以解决这个问题吗？最后一次尝试修复了它，但我觉得应该有更好的方法，而不是用几个.hide（）和.show（）事件来混乱我的JS文件。

你能提供一个JSFIDLE吗？我不完全确定你想要实现什么。每个部分是否应为100%高度和宽度？将#内容更改为高度：100%；我们将实现这一目标。您的#内容100%的高度是多少？@dwreck08谢谢您的小提琴。这就是我的布局。但我要解决的是窗口大小的问题。垂直调整大小时，div会移动，使其看起来像是在滚动。我正试图阻止这种情况发生。另外@dwreck08，您的JSFIDLE也有同样的问题。

#content {
  height:auto
}

#container1, #container2, #container3 {
  position:relative;
  height:100%;
  width:100%;
  background-size:cover;
  overflow:hidden;
}

#container1 {
  background-color:#FF0000;
}
#container2 {
  background-color:#000;
}
#container3 {
  background-color:#363636;
}