移动端HTML/CSS底部弹出卡片高度动态适配问题求助

你的问题本质是固定视口单位（vh）在不同设备的实际可用高度差异，加上min-height强制高度导致的留白，以及内容超出max-height时无滚动能力导致的截断。以下是针对性修复方案：

核心调整思路 #

• 用动态视口单位dvh替代vh：dvh会自动排除浏览器工具栏、刘海/安全区的占用高度，适配iOS和安卓的各种屏幕形态
• 移除min-height：让卡片高度由内容自然撑开，避免内容不足时的多余留白
• 给卡片添加overflow-y: auto：当内容超过最大高度时自动滚动，解决窄屏截断问题
• 优化安全区适配逻辑，确保按钮和卡片的间距准确

修改后的CSS代码 #

@media (max-width: 1025px) {
  .card.open {
    position: fixed; /* 确保卡片固定在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85dvh; /* 用dvh替代vh，适配动态视口 */
    height: fit-content; /* 高度由内容决定，超出max-height时触发滚动 */
    overflow-y: auto; /* 内容超出时允许滚动 */
    padding-bottom: 80px; /* 预留按钮容器的高度+额外间距 */
    box-sizing: border-box; /* 确保padding不会增加总高度 */
  }

  .button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 16px;
    z-index: 999;
    box-sizing: border-box;
  }

  /* 优化iOS安全区适配 */
  @supports (padding: max(0px)) {
    .card.open {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    
    .button-container {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
  }
}

关键细节说明 #

1. dvh的优势：传统vh在iOS浏览器中会包含工具栏高度，导致实际可用高度计算错误；dvh是CSS新特性，会实时计算当前可见的视口高度，完美适配各种移动端场景（包括三星S24 Ultra这类大尺寸屏幕）
2. overflow-y: auto：当卡片内容超过85dvh时，自动显示滚动条，确保所有内容都能被查看，解决窄长屏幕的截断问题
3. 移除min-height：卡片高度完全由内容决定，内容少的时候不会强制撑开高度，解决三星设备的底部留白问题
4. box-sizing: border-box：确保padding不会额外增加元素的总高度，避免布局偏移

额外优化建议 #

• 如果需要卡片打开时有最小高度的视觉效果，可以给卡片的内部容器设置min-height，而不是卡片本身，这样既保证视觉体验，又不会强制留白
• 给滚动条添加自定义样式（针对webkit内核），提升iOS上的滚动体验：

.card.open::-webkit-scrollbar {
  width: 4px;
}
.card.open::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 2px;
}

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