DIV无法完全滚动求助：移动端菜单展开后滚动异常

嘿，这个问题我太熟悉了！你猜的完全没错——html和body设置了height: 100%，再加上某个父元素的overflow: hidden，确实会把页面的滚动空间牢牢锁住，尤其是移动端菜单展开后内容超出视口时，就会出现只能滚动几像素的尴尬情况。

• 调整html/body的高度规则
  把原来的html, body { height: 100%; }替换成min-height: 100vh;，这样既保证页面初始时占满整个视口高度，又能在内容超出时自动延伸页面，不会限制整体滚动：

  html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  

• 修复菜单容器的滚动属性
  找到你那个展开菜单对应的div容器，给它设置合适的滚动规则。如果菜单是悬浮在页面上的弹窗样式，建议单独给它设置max-height: 100vh和overflow-y: auto，让菜单内部自己滚动，不影响页面其他部分：

  .your-menu-div {
    max-height: 100vh;
    overflow-y: auto;
    /* 保留你原来的定位、背景等样式 */
  }
  

• 清理多余的overflow:hidden设置
  检查菜单容器的所有父级元素（比如页面头部、主容器等），看看有没有不必要的overflow: hidden属性，把它们改成overflow: visible或者直接删掉——很多时候这种隐藏溢出的设置会无意中截断滚动区域。

额外提醒：如果你的菜单是通过JS控制展开收起的，要注意展开时不要给body添加overflow: hidden（很多弹窗逻辑会这么做，但菜单展开后内容过长的话，应该让body保持可滚动，或者让菜单内部独立滚动）。

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