Question

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

HTML

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

CSS

#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;
}

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

我怀疑身高：100％;造成问题。特别是，调整大小会导致所有三个容器调整大小，从而产生奇怪的偏移。

我尝试过的事情：

绑定resize事件并动态更改div的高度
添加min-height属性，以便在调整大小后调整大小
隐藏不再在视图中的div

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

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

0 个答案: