/* 问题：底部被遮挡 */
.container-vh {
  height: calc(100vh - 280px); /* 在 iOS 上会超出 */
}

/* 解决方案：完美适配 */
.container-svh {
  height: calc(100svh - 280px); /* 刚好在安全区域内 */
}

.container {
  padding: 20px;
  margin-top: 42px;
  
  /* 首选方案 */
  height: calc(100svh - 280px);
  
  /* 后备方案（不支持 svh 时） */
  height: calc(100vh - 280px);
  
  /* 如果 dvh 支持更好，可以用这个 */
  @supports (height: 100dvh) {
    height: calc(100dvh - 280px);
  }
  
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: red;
}

.container {
  /* 基础样式 */
  padding: 20px;
  margin-top: 42px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  /* 视口高度（按优先级） */
  height: calc(100svh - 280px); /* 1. 首选 */
  height: calc(100dvh - 280px); /* 2. 备选 */
  height: calc(100vh - 280px);  /* 3. 最终后备 */
  
  /* 防止弹性滚动问题 */
  overscroll-behavior-y: contain;
  
  /* 处理底部安全区域 */
  padding-bottom: env(safe-area-inset-bottom);
  
  /* 盒子模型 */
  box-sizing: border-box;
}

<style>
  .container {
    padding: 20px;
    margin-top: 42px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* 默认值（假设 800px 作为后备） */
    height: 520px; /* 800-280 */
  }
  
  /* 如果支持 svh */
  @supports (height: 100svh) {
    .container {
      height: calc(100svh - 280px);
    }
  }
  
  /* 如果支持 dvh 但不支持 svh */
  @supports (height: 100dvh) and (not (height: 100svh)) {
    .container {
      height: calc(100dvh - 280px);
    }
  }
</style>

<!-- 如果有需要，可以添加 JS 检测 -->
<script>
  // 检测 svh 支持并添加类名
  if (CSS.supports('height', '100svh')) {
    document.documentElement.classList.add('supports-svh');
  } else if (CSS.supports('height', '100dvh')) {
    document.documentElement.classList.add('supports-dvh');
  }
</script>

/* 添加调试边框查看实际尺寸 */
.debug .container {
  border: 2px solid #00ff00 !important;
  position: relative;
}

.debug .container::after {
  content: '高度: ' attr(style);
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px;
  font-size: 12px;
}