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

Question

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

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

问题是，当您在移动设备（iPhone 和 Android）上向下滚动页面时，地址行“缩小”（即窗口高度值增加），.layer 高度保持不变，导致其下方出现空白矩形直到您进一步滚动。

我尝试绑定一个 window.resize 事件来重新计算 .layerheight：

$(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%;
}