Ant Design固定左侧侧边菜单问题：内容滚动时菜单固定失效

嗨，我懂你想要的效果——侧边栏稳稳固定不动，只有右侧内容区域能滚动。直接用position:fixed没生效，主要是Ant Design的Layout组件自带的flex布局逻辑干扰了它的定位。咱们换个更适配Ant Design布局的方式来搞定：

核心思路 #

用position: sticky替代fixed，配合flex布局让右侧内容区域自动占满剩余空间并支持滚动，同时保证侧边栏固定在视口内，这样既不会破坏原有布局结构，又能实现需求。

修改步骤及完整代码示例 #

下面是调整后的代码，我标注了关键的样式修改点：

import React, { Component } from 'react';
import { render } from 'react-dom';
import 'antd/dist/antd.css';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = { name: 'React' };
  }

  render() {
    return (
      <Layout>
        <Header className="header">
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        {/* 外层Content：占满Header和Footer之间的视口空间 */}
        <Content style={{ padding: '0 50px', height: 'calc(100vh - 64px - 64px)', overflow: 'hidden' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          {/* 内层Layout：设置flex布局让侧边栏和内容横向排列 */}
          <Layout style={{ display: 'flex', height: '100%', background: '#fff' }}>
            {/* 侧边栏：sticky定位固定在顶部，内容过长时自身可滚动 */}
            <Sider 
              width={200} 
              style={{ 
                background: '#fff',
                position: 'sticky',
                top: 0,
                overflowY: 'auto',
                height: '100%'
              }}
            >
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%' }}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      <Icon type="user" /> subnav 1
                    </span>
                  }
                >
                  <Menu.Item key="1">option1</Menu.Item>
                  <Menu.Item key="2">option2</Menu.Item>
                  <Menu.Item key="3">option3</Menu.Item>
                  <Menu.Item key="4">option4</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      <Icon type="laptop" /> subnav 2
                    </span>
                  }
                >
                  <Menu.Item key="5">option5</Menu.Item>
                  <Menu.Item key="6">option6</Menu.Item>
                  <Menu.Item key="7">option7</Menu.Item>
                  <Menu.Item key="8">option8</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub3"
                  title={
                    <span>
                      <Icon type="notification" /> subnav 3
                    </span>
                  }
                >
                  <Menu.Item key="9">option9</Menu.Item>
                  <Menu.Item key="10">option10</Menu.Item>
                  <Menu.Item key="11">option11</Menu.Item>
                  <Menu.Item key="12">option12</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            {/* 右侧内容区：占满剩余空间，内容过长时显示滚动条 */}
            <Content 
              style={{ 
                padding: '0 24px', 
                flex: 1,
                overflowY: 'auto',
                textAlign: "center" 
              }}
            >
              ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> Really <br/> ... <br/> ... <br/> ... ... <br/> ... <br/> <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/> ... <br/>
            </Content>
          </Layout>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    );
  }
}

render(<App />, document.getElementById('root'));

关键样式解释 #

1. 外层Content：设置height: calc(100vh - 64px - 64px)，减去Header和Footer的高度，让它刚好占满中间的视口空间，overflow: hidden避免整体页面出现滚动条。
2. 内层Layout：display: flex让侧边栏和内容区域横向排列，height: 100%保证它占满父容器的高度。
3. Sider侧边栏：position: sticky + top:0实现固定在视口顶部，overflowY: 'auto'确保侧边栏内容过长时自身可以滚动，不会溢出视口。
4. 右侧Content：flex:1让它自动占满剩余宽度，overflowY: 'auto'让内容超出时显示滚动条，只滚动内容区域。

这样调整后，就能完美实现你想要的左侧固定、右侧滚动的效果啦～

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