本文讲解如何通过 css 正确布局页面中的多分类区块（如 popular、fantasy），使其垂直依次排列、不随键盘弹出而上移，并支持内部独立滚动，同时保持底部导航区域固定不动。

在移动端 Web 开发中，常见需求是：多个分类区块（如

❌ 错误做法（如答案中提到的 position: fixed 直接应用于 .cards）：

header section .cards {
  position: fixed; /* ❌ 危险！会导致所有 .cards 重叠在视口同一位置，失去垂直流式布局 */
}

该写法会破坏文档流，使所有 .cards 脱离原有位置、层叠覆盖，完全违背“一上一下”的结构需求。

✅ 正确解决方案需分三层控制：

1. 确保

垂直流式堆叠（默认即满足）

HTML 中连续的

header {
  display: block; /* 确保为块级容器 */
  padding-bottom: 60px; /* 为底部固定导航预留空间（如 TabBar）*/
}

2. 为每个分类区块启用内部横向滚动

对每个 .cards 容器启用 overflow-x: auto，并禁用换行以实现单行滚动：

section {
  margin: 16px 0;
}
section h4 {
  margin: 0 0 8px 12px;
  font-weight: 600;
}
section .cards {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 12px;
  gap: 12px;
  /* 隐藏滚动条（可选） */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
section .cards::-webkit-scrollbar {
  display: none;
}
/* 卡片示例样式 */
.cards > * {
  flex: 0 0 auto;
  width: 120px;
  height: 160px;
  background: #f5f5f5;
  border-radius: 8px;
}

3. 固定底部导航（非 .cards，而是真正需要固定的元素）

若需“Category fixed at the bottom”，应在

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  z-index: 1000;
}

⚠️ 关键注意事项

• 避免 position: fixed/absolute 作用于 .cards 或
  ：否则将脱离文档流，导致“one under other”失效；
• 键盘弹出时布局偏移？ 这是 iOS/Android WebView 的常见行为。可通过监听 focus 事件 + scrollIntoView() 或使用 viewport-fit=cover + env(safe-area-inset-bottom) 优化，但本质需确保固定元素（如 .bottom-nav）不被
  包裹；
• 语义化建议：
  应承载页眉内容（Logo、搜索框等），底部导航应使用

综上，正确思路是：用文档流保证垂直顺序，用 flex + overflow-x 实现横向滚动，用独立 fixed 导航实现底部固定——三者解耦，各司其职。