ant design位置固定的布局问题

Question

我的布局是header - Content - Footer

在Content中，我有一个布局为Sider + (inner) Content

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

是这样的:

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

如果我注释掉position: 'fixed'，事情很好。但是我想有一个固定位置的侧边，这样在页面上向下滚动时，我总是能看到侧边。

内部内容:

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

我尝试了各种组合，似乎没有任何工作与position: 'fixed'Sider。有什么建议吗?

Answer 1

添加marginLeft到content:

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

Answer 2

我认为你真正想要的是一个位置固定的容器，100 vh &大众，那么你的内部部分可以缩放…请注意，我使用display: inline-block，以便div可以坐在彼此旁边。

示例1

这实际上是flex布局的工作，但取决于你为什么选择使用固定布局，它可能不是理想的

示例2

或者(过度)你可以使用网格，我喜欢的只是因为你有控制范围

示例3