如何在两个绝对定位面板间正确设置div尺寸？移动端兼容优化

你的核心问题是**dvh单位在三星浏览器中兼容性不足**，导致内容高度计算错误，出现被底部键盘遮挡且无法滚动的问题。以下提供两种更可靠的兼容方案：

方案一：Flexbox布局（推荐） #

放弃绝对定位，采用垂直Flex布局实现上下固定、中间滚动的结构，这是目前移动端兼容性最好的方案之一，无需依赖特殊视口单位：

<html>
<style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 适配iOS Safari视口高度 */
  min-height: -webkit-fill-available;
}

.bar {
  width: 100%;
  align-items: center;
  display: flex;
  height: 40px;
  background: #000;
  /* 固定顶部，滚动时不跟随移动 */
  position: sticky;
  top: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  /* 与顶部栏保持间距 */
  padding-top: 5px;
}

.keyboard {
  width: 100%;
  height: 400px;
  background: green;
  /* 固定底部 */
  position: sticky;
  bottom: 0;
}
</style>
<body>
<div class="bar">
Top
</div>
<div class="content">
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>fish</div>
  <div>Cheese</div>
</div>
<div class="keyboard">
Keyboard
</div>
</body>
</html>

方案优势： #

• flex:1自动填充上下固定容器外的剩余空间，无需手动计算高度
• position: sticky保证上下栏滚动时固定，比绝对定位更符合布局逻辑
• -webkit-fill-available适配iOS Safari视口问题，覆盖绝大多数移动端浏览器（含三星浏览器）

方案二：兼容dvh的降级方案 #

若坚持使用原绝对定位结构，可通过CSS降级+JS监听视口变化修复三星浏览器问题：

1. CSS层面添加降级逻辑 #

为content高度添加vh作为 fallback，同时修复滚动层级：

.content {
  margin-top: 45px;
  overflow-y: scroll;
  /* 优先用dvh，不支持则回退到vh */
  height: calc(100dvh - 445px);
  height: calc(100vh - 445px);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* 三星浏览器特殊修复 */
@supports (-webkit-touch-callout: none) and (not (overflow-y: overlay)) {
  .content {
    height: calc(100% - 445px);
  }
}

2. JS动态更新高度 #

监听视口变化（含键盘弹出/收起），实时修正内容高度：

function updateContentHeight() {
  const viewportHeight = window.innerHeight;
  const content = document.querySelector('.content');
  content.style.height = `${viewportHeight - 445}px`;
}

// 初始化执行
updateContentHeight();
// 监听窗口大小变化
window.addEventListener('resize', updateContentHeight);
// 监听屏幕旋转
window.addEventListener('orientationchange', updateContentHeight);
// 部分安卓浏览器需监听visualViewport
if ('visualViewport' in window) {
  window.visualViewport.addEventListener('resize', updateContentHeight);
}

关键问题分析 #

三星浏览器的问题本质是**dvh单位支持不完善**——尽管dvh是为解决vh的视口缺陷设计，但旧版三星浏览器对该单位的解析存在bug，导致高度计算错误。Flexbox布局从根源上避免了这类单位兼容性问题，是最优解。

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