页面滚动元素重叠、跟随键盘问题及分类布局优化求助

一、结构调整 #

先把所有分类<section>包裹进一个专属容器，让布局更可控：

<body>
  <header>
    <!-- 顶部搜索栏等原有代码 -->

    <div class="category-container">
      <section>
        <h4>Popular</h4>
        <i class="bi bi-chevron-left"></i>
        <i class="bi bi-chevron-right"></i>
        <div class="cards"></div>
      </section>
      <section>
        <h4>Fantasy</h4>
        <i class="bi bi-chevron-left"></i>
        <i class="bi bi-chevron-right"></i>
        <div class="cards"></div>
      </section>
      <!-- 其他分类section -->
    </div>
  </header>
  <script src="script.js"></script>
</body>

二、CSS核心代码 #

1. 固定分类在底部，不受键盘干扰 #

header {
  position: relative;
  min-height: 100vh; /* 确保header占满视口，避免布局塌陷 */
}

.category-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh; /* 可根据需求调整高度，留出顶部搜索空间 */
  overflow-y: auto; /* 开启垂直滚动，让分类能上下滑动 */
  background: #fff; /* 加背景色防止下方内容透显 */
  padding: 1rem;
  box-sizing: border-box;
}

2. 解决元素重叠，实现分类上下排列 #

.category-container section {
  margin-bottom: 1.5rem; /* 分类间留间距，避免紧贴 */
  display: block; /* 强制每个分类独占一行 */
}

.cards {
  display: flex; /* 假设卡片横向排列，按需调整 */
  gap: 1rem;
  overflow-x: auto; /* 卡片过多时开启横向滚动 */
  padding: 0.5rem 0;
}

3. 键盘唤起适配（可选） #

部分移动端浏览器唤起键盘会压缩视口，添加媒体查询优化：

@media screen and (max-height: 500px) {
  .category-container {
    height: 50vh; /* 视口变小时自动调整容器高度 */
  }
}

三、额外优化点 #

• 若顶部搜索栏需要固定，给搜索栏加position: fixed; top: 0; left: 0; right: 0;，同时给.category-container设置top: [搜索栏高度]，避免遮挡
• 添加overscroll-behavior-y: contain;到.category-container，防止滚动分类时触发页面整体滚动

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