在移动设备上向上滚动时，容器会中断

Question

我有一个调查页面，其中的身体有background-color: #A71930，还有一个装有background-color: white的容器，其中装有<form>，就像在台式机上一样：

我为移动设备添加了以下@media查询：

@media all and (max-width: 600px) {
  #survey-container {
    width: 100%;
    }
  }
  @media all and (max-height: 600px) {
  #survey-container {
    height: 100%;
    }
  }

这些查询使页面在电话屏幕上看起来像这样：

这目前很好，但是我的问题是，当您滚动到底部然后开始向上备份时，会在这里发生

如您所见，向上滚动时，容器的一部分在底部被切除，仍然保留<form>内容。您可以自己查看here。那么，是什么导致此问题，以及如何解决？我的完整代码可以在下面查看（该问题似乎未在Codepen中发生，因此只能在移动浏览器中尝试该问题）： https://codepen.io/jerryd2304/pen/qvERZL

Answer 1

我能够在Mac / Safari（12.0.3）中复制它，但不能在Chrome或Firefox中复制。

修复1：

完全删除height: 100%。

修复2：

将height更改为min-height：

@media all and (max-height: 600px) {
  #survey-container {
    min-height: 100%;
  }
}

无论哪种方式，问题都可以解决：