Antd布局：禁用Header滚动条但保留Content滚动条

核心思路是通过固定定位Header和Sider，让Content区域单独承担滚动逻辑，避免滚动条覆盖Header区域。以下是具体实现方案：

实现步骤与代码示例 #

1. 布局结构 #

先搭建Antd Layout的基础结构，明确区分Header、Sider和Content三个模块：

import { Layout } from 'antd';
import './LayoutStyle.css';

const { Header, Sider, Content } = Layout;

const FixedLayout = () => {
  return (
    <Layout className="layout-container">
      <Header className="fixed-header">顶部导航</Header>
      <Layout>
        <Sider className="fixed-sider">侧边菜单</Sider>
        <Content className="scrollable-content">
          {/* 填充大量内容测试滚动效果 */}
          {Array.from({ length: 50 }).map((_, idx) => (
            <div key={idx} className="content-item">内容项 {idx + 1}</div>
          ))}
        </Content>
      </Layout>
    </Layout>
  );
};

export default FixedLayout;

2. 关键样式设置 #

创建LayoutStyle.css文件，通过CSS控制定位规则和滚动逻辑：

/* 全局重置，消除默认滚动条干扰 */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.layout-container {
  min-height: 100vh;
}

/* 固定顶部Header，确保层级不被遮挡 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px; /* 匹配Antd默认Header高度 */
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 固定侧边Sider，避开Header占据的空间 */
.fixed-sider {
  position: fixed;
  top: 64px; /* 与Header高度保持一致 */
  left: 0;
  width: 200px; /* 自定义Sider宽度 */
  height: calc(100vh - 64px);
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

/* 可滚动Content区域，避开Header和Sider的位置 */
.scrollable-content {
  margin-top: 64px; /* 避开Header */
  margin-left: 200px; /* 避开Sider */
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 24px;
  background: #f5f5f5;
}

/* 示例内容项样式 */
.content-item {
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 4px;
}

原理说明 #

• 禁用body/html的滚动，避免全局滚动条干扰布局
• Header固定在视口顶部，设置足够高的z-index保证不被其他元素遮挡
• Sider固定在视口左侧，顶部距离等于Header高度，高度占满剩余视口空间
• Content区域通过margin-top和margin-left避开Header与Sider，同时设置height: calc(100vh - 64px)和overflow-y: auto，让滚动条仅出现在Content内部，不会延伸到Header侧边

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