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

我有一个带有

position: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%");
});

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

试试这个：

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

弹性代替位置：固定：

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

---

刚想到这个，但没有影响。父容器是否有position:relative？是的，它的主体具有position-relative。您可以始终使用display:flex而不是position:fixed，这在手机中更有效。我会用这个更新我的答案。我想把它的高度提高到120%。如果有人能给我一个更优雅的解决方案，我会很高兴。我会使用

top:0；左：0；底部：0；右：0。即使设置<代码>高度：100%；宽度：100%

也应该这样做，设置所有边有时会修复不寻常的问题。你能发布页面的URL吗