React Ant：如何创建缩小版左右布局并固定左侧列

Hey there! 刚好我对Antd的布局组件很熟悉，这就给你讲清楚怎么实现更小的固定左侧布局～

核心思路 #

要实现这个需求，我们主要用到Antd的Layout组件（包含Sider和Content），再结合CSS定位来固定侧边栏，同时自定义宽度让布局比官方示例更小。

基础实现代码 #

先给你一个无顶部导航的基础版本：

import { Layout } from 'antd';
const { Sider, Content } = Layout;

const SmallFixedLayout = () => {
  // 自定义侧边栏宽度，比Antd默认的256px更小
  const siderWidth = 200;

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 固定左侧的侧边栏 */}
      <Sider 
        width={siderWidth}
        style={{
          position: 'fixed', // 固定定位，让侧边栏不随页面滚动
          left: 0,
          top: 0,
          height: '100vh', // 占满整个视口高度
          background: '#fff', // 保持和主题一致的背景色
        }}
      >
        {/* 这里放你的侧边栏内容，比如菜单、Logo等 */}
        <div style={{ padding: '16px', fontSize: '18px', fontWeight: 'bold' }}>固定侧边栏</div>
      </Sider>

      {/* 主内容区域 */}
      <Content 
        style={{
          marginLeft: siderWidth, // 必须和侧边栏宽度一致，避免内容被遮挡
          padding: '24px',
          background: '#f0f2f5',
          minHeight: '100vh',
        }}
      >
        {/* 这里放你的页面主内容 */}
        <div style={{ fontSize: '18px' }}>主内容区域</div>
      </Content>
    </Layout>
  );
};

export default SmallFixedLayout;

带头部导航的适配版本 #

如果你的页面有顶部导航栏，需要调整侧边栏的top值和主内容的marginTop，避免被头部遮挡：

import { Layout } from 'antd';
const { Header, Sider, Content } = Layout;

const SmallFixedLayoutWithHeader = () => {
  const headerHeight = 64; // Antd Header默认高度
  const siderWidth = 200;

  return (
    <Layout>
      {/* 固定顶部的导航栏 */}
      <Header 
        style={{ 
          position: 'fixed', 
          width: '100%', 
          zIndex: 1, 
          height: headerHeight,
          background: '#001529'
        }}
      >
        <div style={{ color: '#fff', fontSize: '18px' }}>顶部导航</div>
      </Header>

      <Layout style={{ marginTop: headerHeight }}>
        {/* 固定左侧的侧边栏，顶部留出Header的高度 */}
        <Sider 
          width={siderWidth}
          style={{
            position: 'fixed',
            left: 0,
            top: headerHeight,
            height: `calc(100vh - ${headerHeight}px)`, // 减去Header高度，占满剩余视口
            background: '#fff',
          }}
        >
          <div style={{ padding: '16px', fontSize: '18px', fontWeight: 'bold' }}>固定侧边栏</div>
        </Sider>

        {/* 主内容区域，同时适配Header和Sider */}
        <Content 
          style={{
            marginLeft: siderWidth,
            padding: '24px',
            background: '#f0f2f5',
            minHeight: `calc(100vh - ${headerHeight}px)`,
          }}
        >
          <div style={{ fontSize: '18px' }}>主内容区域</div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default SmallFixedLayoutWithHeader;

关键注意事项 #

• 固定定位的适配：position: fixed会让元素脱离文档流，所以一定要给Content设置和Sider宽度一致的marginLeft，否则主内容会被侧边栏挡住。
• 滚动内容处理：如果侧边栏内容过多，可以给Sider添加overflow: auto样式，这样内容超出时会出现滚动条，不影响布局。
• 响应式优化：如果需要在小屏幕上收起侧边栏，可以结合Antd的Breakpoint组件监听屏幕尺寸，动态切换Sider的collapsed属性。

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