css iPad Safari 100％高度问题-猿码集

在 iPad Safari 中，100% 高度设置不总是按预期工作，特别是在需要将容器的高度设置为视口高度的情况下。

## 1. 设置容器高度为100%

当您尝试将容器的高度设置为100%时，可能会发现它并没有占据整个视口高度。这是因为 100% 高度是相对于其父元素高度计算的。如果父元素高度为 auto，则该高度将被解释为内容的最小高度。这意味着父元素的高度应该被设置为视口高度，才能正确设置容器高度为 100%。

例如，以下 CSS 将在 iPad 上无法使容器元素填充整个视口：


.container {
  height: 100%;
}

如果您想让容器元素沾满整个视口，可以将它的父元素设置为 100% 高度：


html,
body {
  height: 100%;
}
.container {
  height: 100%;
}

## 2. 使用视口单位

视口单位（vh）是一种相对于视口高度的单位。使用 vh 可以更容易地将元素的高度设置为视口的 100%，而无需在父元素上设置高度。以下是示例 CSS：


.container {
  height: 100vh;
}

请注意，vh 单位不支持在 Safari 以外的所有浏览器中使用，因此需要进行后备设置。

## 3. 使用绝对定位

另一种常见的解决方案是使用绝对定位。通过将容器元素的位置设置为 absolute，并设置 top、bottom、left 和 right 属性为 0，可以将其完全覆盖父元素。以下是示例 CSS：


html,
body {
  height: 100%;
}
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

## 4. 使用 flexbox

使用 flexbox 可以更轻松地使容器元素将其子元素铺满整个视口。以下是一些使用 flexbox 的示例 CSS：

### 4.1 竖直方向


html,
body {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1;
}

### 4.2 水平方向


html,
body {
  height: 100%;
}
.container {
  display: flex;
  height: 100%;
}
.content {
  flex: 1;
}

## 总结

在 iPad Safari 中，100% 高度设置可能会引起一些问题，但是有许多解决方案可供选择。使用视口单位和 flexbox 是最常用的两种方法，但使用绝对定位也是一种可行的选择。无论您选择哪种方法，请确保您的 CSS 是兼容的，并且在其他浏览器中也能正常工作。

css iPad Safari 100％高度问题