Search code examples
reactjslayoutantd

Antd - Disable scroll bar in Header but not in Content in the layout

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:

enter image description here

What I want:

enter image description here

Solution

  • 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/>.

    Link demo

    <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: enter image description here