ReactJS与CSS布局问题：移动端侧边栏展开时出现多余垂直滚动条

问题描述 #

使用React和CSS开发仪表盘布局，包含Header、Sidebar和用于展示图表的Middle-area。移动端（屏幕宽度<768px）默认隐藏Sidebar，点击Header菜单图标可切换Sidebar的显示/隐藏状态。当Sidebar显示时，需要wrapper开启横向滚动以完整展示Middle-area内容，但在Windows Chrome和Android Chrome中会出现多余的垂直滚动条（Edge浏览器无此问题）。

问题分析 #

1. height:100vh 在移动端会因浏览器地址栏的动态变化导致布局高度超出视口，触发不必要的垂直滚动。
2. .wrapper.toggled 使用 width:fit-content 时，内部 .dashboard 的固定高度与容器尺寸不匹配，引发垂直溢出。
3. .middle-area 的内边距未纳入盒模型计算，可能导致元素总高度超出父容器范围。

修复方案 #

调整以下CSS属性，解决垂直滚动条异常问题：

1. 使用 100dvh 替代 100vh，适配移动端动态视口高度。
2. 全局设置盒模型为 border-box，确保内边距和边框不增加元素总尺寸。
3. 优化 .wrapper.toggled 的布局逻辑，避免宽度变化引发的高度溢出。
4. 调整容器高度的自适应规则，确保子元素不会超出父容器范围。

修复后的代码 #

React JSX（无需修改）

// 侧边栏切换状态
const [sidebarToggled, setSidebarToggled] = useState(false);

// sidebarToggled(false) = 侧边栏可见
// sidebarToggled(true) = 侧边栏隐藏

<div className={sidebarToggled?'wrapper':'wrapper toggled'}>
  <div className="dashboard">
     <Header />
    <div className="content-wrapper">
     <Sidebar />
     <div className="middle-area">
        <div className="middle-content"></div>
     </div>
    </div>
  </div>
</div>

修复后的CSS

/* 全局盒模型重置，避免内边距/边框导致的尺寸溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper{
  width: 100%;
  overflow: hidden;
  min-height: 100dvh;
}

@media(max-width: 768px){  
  .wrapper.toggled{
    display: inline-flex;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.dashboard{
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-wrapper{
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #eaeaea;
}

.sidebar{
  min-width: 180px;
  max-width: 180px;
  height: 100%;
  background-color: #f7f9fa;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sidebar.hidden{
  margin-left: -180px;
}

.middle-area {
  flex: 1;
  background-color: #f1f3f6;
  border-left: 1px solid #eaeaea;
  padding: 25px 40px 40px 40px;
  min-width: 320px;
  overflow-y: auto; /* 仅当Middle-area内容过长时显示垂直滚动 */
}
  
.middle-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

关键调整说明 #

• 100dvh 适配动态视口：解决移动端浏览器地址栏变化导致的布局高度溢出问题。
• 全局盒模型重置：确保所有元素的内边距和边框不会额外增加尺寸，避免意外溢出。
• .wrapper.toggled 使用 display:inline-flex：让容器宽度自适应内容的同时，保持高度与视口一致，避免垂直滚动条误触发。
• .content-wrapper 设为 flex:1：自动填充父容器剩余空间，确保高度不会超出范围。
• .middle-area 独立垂直滚动：仅当内部内容过长时显示垂直滚动条，而非整个wrapper容器。

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