静态落地页内子元素无法滚动问题求助

你的.child元素无法滚动的核心原因是没有给它设置明确的高度限制——子元素默认会根据内容自适应高度，父元素的overflow: hidden只会隐藏超出父容器的部分，但不会让子元素产生滚动条。只有当子元素的内容超出自身固定高度（或最大高度）时，overflow: scroll才会生效。

修复步骤 #

• 给.child设置明确的高度（或最大高度），让它的高度被限制在父容器范围内，内容超出时自动触发滚动。
• 可选：添加box-sizing: border-box，避免内边距、边框等额外尺寸撑破高度限制。

修改后的代码 #

CSS #

.parent {
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
}

.child {
  overflow: scroll;
  height: 100%; /* 限制子元素高度与父容器一致 */
  box-sizing: border-box; /* 避免内边距影响高度计算 */
  margin-bottom: 10px; /* 子元素间添加间距 */
}

/* 可选：隐藏滚动条但保留滚动功能 */
.child::-webkit-scrollbar {
  display: none;
}
.child {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

HTML #

<div class="parent">
  <div class="child">
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
  </div>
  
  <div class="child">
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
    <p>测试内容2</p>
  </div>
</div>

灵活优化方案 #

如果希望两个.child元素自动平分父容器高度，可改用Flex布局：

.parent {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 子元素间距 */
}
.child {
  flex: 1; /* 自动平分剩余空间 */
  overflow: scroll;
}

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