javascript - Safari Mobile 应用程序横幅更改视口(viewport)高度

Question

地址栏下方的横幅正在改变高度，甚至不是 DOM 的一部分。

Position: fixed 底部的元素被隐藏。

可以通过

查看

1. 打开https://www.ounass.ae/clothing/在 Safari - iOS 智能手机
2. 向下滚动以查看此应用横幅
3. 点击过滤依据按钮。

Answer 1

你试过-webkit-fill-available

html {
  height: -webkit-fill-available;
}

body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

main {
  flex: 1;
}

<header>HEADER GOES HERE</header>
<main>MAIN GOES HERE</main>
<footer>FOOTER GOES HERE</footer>