--- order: 7 iframe: 360 title: zh-CN: 固定侧边栏 en-US: Fixed Sider --- ## zh-CN 当内容较长时,使用固定侧边栏可以提供更好的体验。 ## en-US When dealing with long content, a fixed sider can provide a better user experience. ```tsx import { Layout, Menu, MenuProps } from 'antd'; import { AppstoreOutlined, BarChartOutlined, CloudOutlined, ShopOutlined, TeamOutlined, UserOutlined, UploadOutlined, VideoCameraOutlined, } from '@ant-design/icons'; const { Header, Content, Footer, Sider } = Layout; const items: MenuProps['items'] = [ UserOutlined, VideoCameraOutlined, UploadOutlined, BarChartOutlined, CloudOutlined, AppstoreOutlined, TeamOutlined, ShopOutlined, ].map((icon, index) => ({ key: String(index + 1), icon: React.createElement(icon), label: `nav ${index + 1}`, })); ReactDOM.render( <Layout hasSider> <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0, }} > <div className="logo" /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} /> </Sider> <Layout className="site-layout" style={{ marginLeft: 200 }}> <Header className="site-layout-background" style={{ padding: 0 }} /> <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}> <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}> ... <br /> Really <br /> ... <br /> ... <br /> ... <br /> long <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> ... <br /> content </div> </Content> <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> </Layout> </Layout>, mountNode, ); ``` ```css #components-layout-demo-fixed-sider .logo { height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2); } .site-layout .site-layout-background { background: #fff; } ``` <style> [data-theme="dark"] .site-layout .site-layout-background { background: #141414; } </style>