如何将footer固定在页面底部？现有实现仅iPhone X、iPad适配异常

你遇到的iPhone X、iPad端footer下方留白问题，核心是iOS Safari的安全区域适配机制导致的。带刘海、圆角屏、底部手势条的iOS设备会默认在视口底部预留安全边距，避免内容被遮挡，你的现有代码未适配该特性，因此出现多余留白。
不建议使用position: absolute设置footer：如果页面内容高度超过视口需要滚动，absolute定位的footer会固定在视口底部遮挡内容，还需要额外给main添加底部padding适配，反而增加复杂度，也不会和你现有的grid布局兼容得很好。

修复步骤 #

1. 先调整viewport配置，在HTML的<head>标签内添加如下声明，告知浏览器允许页面内容覆盖整个视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 修改CSS代码，适配iOS安全区域，同时优化粘性footer实现，完全兼容现有grid布局：

/* 新增全局基础重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  line-height: 1;
  background-color: #f3f3f3;
  /* 全局使用grid布局实现自动粘性footer，不需要再用负margin */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.services-wrapper {
  display: grid;
  width: auto;
  grid-template-rows: auto 3fr;
  grid-row-gap: 20px;
  /* 删除原有写死的高度计算，由全局grid自动分配高度 */
  /* height: calc(100vh - 30px); */
}

.services-grid {
  padding-bottom: 30px;
  overflow: auto;
}

.services-grid>div {
  background-color: white;
  vertical-align: middle;
  padding: 25px;
  margin: 30px;
}

footer {
  position: relative;
  padding-top: 5px;
  /* 删除原有负margin，避免多端兼容问题 */
  /* margin-top: -30px; */
  background-color: white;
  height: 30px;
  width: 100%;
  overflow: hidden;
  clear: both;
  /* 适配iOS底部安全区域，自动延伸footer覆盖留白 */
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

如果你不想改动现有布局逻辑，只需要做两处最小修改即可：

• 保留上述viewport配置修改
• 调整services-wrapper的高度计算逻辑：height: calc(100vh - 30px - env(safe-area-inset-bottom));
• 给footer添加属性padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;

内容的提问来源于stack exchange，提问作者jag6