英文:
Antd - Disable scroll bar in Header but not in Content in the layout
问题
我正在使用Antd Layout在我的应用程序中，其中Header和Sider是固定的。
我希望我的内容可以滚动，但我不希望滚动条出现在Header旁边。我找不到如何做到这一点的任何示例，也无法自己弄清楚。
现在的情况：
我想要的：
英文:
I am using Antd Layout in my app where the Header and the Sider are fixed.
I want my content to be scrollable but I don't want the scrollbar to appear beside the Header. I couldn't find any example on how to do this and I can't seem to figure it out on my own
What I have now:
What I want:
答案1
得分: 1
这很简单，如果你想在一个区域内滚动，它必须有一个固定的高度。
在这里，你可以设置包装<Header/>和<Content/>的<Layout/>的height（或maxHeight）。然后为<Header/>设置固定的height，并为<Content/>设置overflow: "auto"。
<Layout hasSider>
<Sider {/* ... */} />
<Layout
className="site-layout"
style={{ marginLeft: 200, height: "100vh" }}
>
<Header style={{ height: 60 }} />
<Content style={{ padding: 16, overflow: "auto" }}>
{/* 内容在这里 */}
</Content>
</Layout>
</Layout>
结果：
英文:
It's pretty simple, if you want to scroll inside an area, it must has a fixed height.
Here, you can set height (or maxHeight) of the <Layout/> which is wrapping <Header/> and <Content/>. Then set fixed height for <Header/> and set overflow: "auto" for <Content/>.
<Layout hasSider>
<Sider {/* ... */} />
<Layout
className="site-layout"
style={{ marginLeft: 200, height: "100vh" }}
>
<Header style={{ height: 60 }} />
<Content style={{ padding: 16, overflow: "auto" }}>
{/* content here /*}
</Content>
</Layout>
</Layout>
Result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论