iOS Safari 使用 CSS 让 div 填充屏幕

在开发网页时，我们经常需要让某个元素（比如 div）填充整个屏幕。在桌面浏览器上，我们可以使用 height: 100vh; 来实现这个效果。但是在 iOS Safari 上，这个方法可能会出现一些问题。本文将介绍如何使用 CSS 让 div 在 iOS Safari 中填充屏幕。

问题描述

在 iOS Safari 上，使用 height: 100vh; 可能会出现 div 的高度小于屏幕高度的问题。这是由于 iOS Safari 把地址栏和底部工具栏也算作屏幕高度的一部分，导致实际可视区域比屏幕高度要小。因此，当我们使用 height: 100vh; 时，div 的高度不是整个屏幕的高度。

解决方法

为了让 div 填充整个屏幕，我们需要使用 min-height: -webkit-fill-available; 代替 height:100vh;。这个方法可以让 div 的高度等于实际可视区域的高度，从而填充整个屏幕。

div {
  min-height: -webkit-fill-available;
}

此外，我们可能还需要对父元素添加 height:100%; 和 overflow:hidden;，以确保 div 的高度正确地继承自父元素。

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  min-height: -webkit-fill-available;
  height: 100%;
}

总结

在 iOS Safari 上让 div 填充整个屏幕需要使用 min-height: -webkit-fill-available;。如果还需要对父元素进行处理，请添加 height: 100%; 和 overflow: hidden;。

以上方法可以保证在 iOS Safari 上让 div 填充整个屏幕。