iPad Safari下无溢出100vh body中绝对定位div的布局问题

嘿，我之前也碰到过iPad Safari这个烦人的滚动条问题，结合你的场景，除了position:fixed，这几个方案应该能帮到你：

1. Flexbox垂直布局（最推荐） #

Flexbox是实现固定上下栏最稳定的方式之一，完全不需要依赖fixed或absolute，还能完美适配移动端浏览器，包括iPad Safari。

核心思路是把主容器设为垂直方向的flex布局，让工具栏占用固定高度，中间内容区自动填充剩余空间，整体高度严格锁定为100vh，不会出现溢出滚动。

* { margin: 0; border: 0; padding: 0; box-sizing: border-box; }
#main { 
  width: 100vw; 
  height: 100vh; 
  background: lightgray; 
  overflow: hidden;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}
.bar { 
  width: 100%; 
  height: 60px; 
  background: red;
}
/* 如果需要中间内容滚动，添加这个容器 */
#content {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 内容超出时可滚动 */
}

对应的HTML结构调整：

<div id="main">
  <div id="top" class="bar"></div>
  <div id="content">
    <!-- 这里放页面的主要内容 -->
  </div>
  <div id="bottom" class="bar"></div>
</div>

2. Grid网格布局（直观易维护） #

Grid布局的语法更直观，直接定义行高就能实现固定栏效果，兼容性同样覆盖iPad Safari。

* { margin: 0; border: 0; padding: 0; box-sizing: border-box; }
#main { 
  width: 100vw; 
  height: 100vh; 
  background: lightgray; 
  overflow: hidden;
  display: grid;
  grid-template-rows: 60px 1fr 60px; /* 顶部60px，中间剩余高度，底部60px */
}
.bar { 
  width: 100%; 
  background: red;
}
#content {
  overflow-y: auto; /* 中间内容滚动用 */
}

HTML结构和Flexbox方案一致，中间用#content包裹主要内容即可。这种方式的优势是布局规则一目了然，后续调整栏高只需要修改grid-template-rows的值。

3. 修复absolute布局的iPad Safari滚动问题 #

如果你坚持要用absolute作为临时方案，可以通过以下调整解决滚动条问题：

iPad Safari的滚动bug通常是因为viewport计算差异（比如地址栏高度影响vh值），或者默认触摸滚动行为导致的。我们可以通过锁定html/body高度、禁止不必要的触摸滚动来修复：

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: none; /* 禁止全局触摸滚动，适合不需要滚动的页面 */
}
#main { 
  width: 100%; 
  height: 100%; 
  background: lightgray; 
  overflow: hidden;
  position: relative; /* 让absolute元素相对于它定位 */
}
.bar { 
  position: absolute; 
  width: 100%; 
  height: 60px; 
  background: red;
}
#top { top: 0; }
#bottom { bottom: 0; }

如果页面需要中间内容滚动，不要加touch-action:none，而是给中间内容容器设置：

#content {
  position: absolute;
  top: 60px;
  bottom: 60px;
  width: 100%;
  overflow-y: auto;
}

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