ant design 布局问题，位置固定 Sider答案

【问题标题】：ant design Layout issue with position fixed Siderant design 布局问题，位置固定 Sider
【发布时间】：2021-11-25 11:04:44
【问题描述】：

我的布局是页眉-内容-页脚

在上述内容中，我有一个 Sider +（内部）内容的布局

如果 Sider 不是 position: "fixed"，一切都会按预期运行。但是，如果我希望 Sider 具有 position: "fixed"，那么内部 Content 将决定扩展到外部 Content 的整个宽度，并溢出 Sider。

这是侧边：

< Sider
    width="25%"
    style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
    }}
>

如果我注释掉position: 'fixed'，一切都会好起来的。但我希望有一个固定位置的 Sider，这样在页面上向下滚动时，我总是会看到 Sider。

这是内部内容：

<Content
    width="75%"
    style={{
        overflow: 'auto',
        // maxWidth: "75%",
        // right: 0,
       // float: "right",
    }}
>

我尝试了各种组合，但position: 'fixed' Sider 似乎没有任何效果。有什么建议吗？

【问题讨论】：

【解决方案1】：

我认为你真正想要的是一个位置固定的容器，100 vh & vw，然后你的内部部分可以缩放......请注意我正在使用display: inline-block，以便 div 可以并排放置.

这实际上是 flex 布局的工作，但根据您选择使用固定布局的原因，它可能并不理想

或者（过度杀伤）你可以使用网格，我喜欢它只是因为你有控制范围

【讨论】：

【解决方案2】：

在内容中添加marginLeft：

<Content
    width="75%"
    style={{
        overflow: 'auto',
        marginLeft: '25%'
    }}
>

【讨论】：