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

Question

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

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

问题是当你在移动设备（iPhone和Android）上向下滚动页面时，地址线“缩小”（即窗口高度值增加）.layer高度保持相同，导致右边的空白矩形在它之下，直到你进一步滚动。

我尝试绑定一个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%;
}