CSS问题：如何固定左侧菜单并实现右侧内容滚动？

问题原因 #

当前布局未给容器设置固定高度，导致整个页面内容同步滚动，无法让左侧菜单保持固定。你之前设置的overflow: hidden和固定高度仅作用于右侧内容，但父容器高度未做限制，因此无效。

解决方案 #

通过给左侧菜单添加粘性定位（sticky），同时让右侧内容区域成为独立滚动容器，具体修改代码如下：

const DashboardLayout = ({ children }: Props) => {
    const isDesktop = useMediaQuery('(min-width: 575px)')

    return (
        <Layout isNavbarTransparent={false}>
            {/* 给section设置高度，需替换成实际导航栏高度，比如80px */}
            <section className={`section-base`} style={{ height: 'calc(100vh - 80px)' }}>
                {/* flex容器继承section的高度 */}
                <div style={{ display: 'flex', height: '100%' }}>
                    {isDesktop ? (
                        <>
                            {/* 左侧菜单容器：粘性定位+占满高度，菜单过长时自身滚动 */}
                            <div style={{ 
                                flexBasis: '350px', 
                                position: 'sticky', 
                                top: 0, 
                                height: '100%', 
                                overflowY: 'auto' 
                            }}>
                                <DashboardSidebar embeddedIn={'dashboard'} />
                            </div>
                            {/* 右侧内容：占满剩余空间，内容过长时独立滚动 */}
                            <div style={{ flex: 1, overflowY: 'auto' }}>{children}</div>
                        </>
                    ) : (
                        <div style={{ height: '100%', overflowY: 'auto' }}>{children}</div>
                    )}
                </div>
            </section>
        </Layout>
    )
}

关键修改点 #

• 外层section设置固定高度：用calc(100vh - 导航栏高度)确保内容区域占满除导航栏外的视口空间。
• 左侧菜单容器添加position: sticky; top: 0：滚动时保持在顶部，同时保留在flex布局流中，不破坏原有布局结构。
• 左侧菜单设置height: 100%和overflowY: auto：菜单内容过长时可自身滚动，避免超出视口。
• 右侧内容区域设置flex: 1和overflowY: auto：占据剩余空间，内容过长时独立滚动，不带动左侧菜单。

内容的提问来源于stack exchange，提问作者János