解决移动端嵌套div双层滚动条重叠问题

问题原因分析 #

你的问题核心出在两处样式设置的冲突：

• #background 用了固定的 height:100vh 和强制的 overflow:scroll，移动端浏览器的视口高度会随地址栏/工具栏动态变化，导致容器高度计算偏差，强制显示不必要的滚动条。
• 动态填充的 <ul> 内容过多时，内层容器 #employee-manage 的布局规则和外层容器的滚动逻辑叠加，触发了双重滚动的问题。

分步解决方案 #

1. 修正外层容器 #background 的样式

把固定高度改为自适应最小高度，同时调整滚动行为为仅内容超出时显示：

#background {
    width: 100vw;
    min-height: 100vh; /* 替换固定height为min-height，适配移动端动态视口 */
    background-color: gainsboro;
    margin: 0;
    overflow: auto; /* 替换scroll为auto，仅内容超出视口时显示滚动条 */
}

2. 优化内层容器 #employee-manage 的滚动逻辑

如果希望整个页面统一滚动，保持现有 overflow:hidden 即可；若需要内部列表单独滚动，可设置最大高度并允许纵向滚动：

#employee-manage, #employee-select {
    width: 90%;
    max-width: 600px;
    background-color: white;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 0 15px grey;
    padding-bottom: 20px;
    overflow: hidden; /* 保持隐藏溢出，避免内部触发额外滚动 */
    position: relative;
    /* 若需要内部列表单独滚动，添加以下样式：
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    */
}

3. 确保移动端视口配置

在HTML头部添加视口元标签，保证响应式布局正常生效：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

额外调整建议 #

• 移除 #employee-manage 的 height:auto 声明（默认即为auto，无需显式设置）
• 检查移动端下 <li> 的布局，确保不会因内容换行导致容器高度意外增加

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