jquery - 在移动屏幕上调整窗口大小后的空白矩形

Question

我有一个带有 postion:fixed 的容器，它占据了整个屏幕的大小:

.layer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
}

问题是，当您在移动设备(iPhone 和 Android)上向下滚动页面时，由于其地址行“收缩”(即其窗口高度值增加)，.layer 高度保持不变，导致在您进一步滚动之前，它下方会出现一个空白矩形。

我试图绑定(bind)一个 window.resize 事件来重新计算 .layer 的高度:

$(window).resize(function(){
    $('.layer').css("height", "100%");
});

但是没有影响。有什么想法吗？

Answer 1

试试这个:

.layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: red;
}

Flex 而不是位置:固定:

body {
  display: flex;
  min-height: 100%;
}
.layer {
   flex: 1 0 auto;
   width: 100%;
}