本文讲解如何通过 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 导航实现底部固定——三者解耦，各司其职。
