固定Header+可滚动菜单与内容+固定Footer的CSS布局问题

我需要实现的布局要求：

• 顶部Header固定可见
• 中间主体分为左侧可滚动Menu、右侧可滚动Content两个面板
• 底部Footer固定可见

但当前实现存在问题：拆分主体为两个面板后，页面出现全局滚动条，Footer被挤至下方需滚动才能查看，不符合预期。

问题复现代码 #

CSS

html,
body {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
}

.body .menu {
  height: 100%;
  display: flex;
  overflow: auto;
}

.body .content {
  flex: 1;
  overflow: auto;
}

HTML

<div class="wrapper">
  <div class="header">header</div>

  <div class="body">
    <div class="menu">
      <ul>
        <!-- 重复添加li项测试滚动 -->
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <!-- 更多li... -->
      </ul>
    </div>
    <div class="content">
      <ul>
        <!-- 重复添加li项测试滚动 -->
        <li>Content Item</li>
        <li>Content Item</li>
        <li>Content Item</li>
        <!-- 更多li... -->
      </ul>
    </div>
  </div>

  <div class="footer">footer</div>
</div>

解决方案 #

问题核心是.body的height:100%导致容器超出视口，加上缺少全局滚动限制，最终出现全局滚动条。修改如下：

修改后的完整代码

html,
body {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁止全局滚动，将滚动限制在内部面板 */
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  width: 100%;
  /* 移除height:100%，flex:1已让它占据Header和Footer之外的剩余空间 */
  display: flex;
}

.body .menu {
  width: 200px; /* 设置固定宽度，保证菜单区域稳定 */
  height: 100%;
  display: flex;
  overflow: auto;
}

.body .content {
  flex: 1;
  overflow: auto;
}

/* 可选：给Header/Footer添加基础样式，便于区分 */
.header, .footer {
  padding: 1rem;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.footer {
  border-bottom: none;
  border-top: 1px solid #ddd;
}

关键修改说明

1. html, body添加overflow: hidden：彻底阻止全局滚动条出现，确保滚动仅发生在Menu和Content内部
2. 移除.body的height:100%：.wrapper是flex列布局，.body通过flex:1自动填充Header和Footer之外的剩余空间，设置100%高度会让它超出视口，触发全局滚动
3. 给.menu设置固定宽度：避免菜单随内容宽度变化挤压右侧Content区域，保证布局稳定性

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