The issue at hand is a result of the interaction between multiple <Layout /> components and their children, particularly when they have varying heights. It seems that child Layout and Content components inherit height from the parent Layout, or at least have a smaller height.
Your current Layout setup looks like this (pseudocode):
<Layout>
<Layout restrictedHeight >
<Layout inheritedRestrictedHeight>
<Content inheritedRestrictedHeight >
<div unrestrictedHeight />
</Content> //Content "height" ends here
<Footer fixedPosition /> //Always begins where Content ends
//Div "height" ends here
</Layout>
</Layout>
</Layout>
The footer is implemented in such a way that it is placed after the Content in the DOM, but since the large div's height is not restricted, it extends far below the Content container. This results in the Footer component appearing to render within the content.
The issue lies with this line:
<Layout hasSider={true} style={{ height: "100vh", marginTop: 64 }}>
By setting the height property to 100vh (100% view height), you are effectively limiting the layout to the current pixel count available on the screen vertically. To address this, set the height to 100% instead of 100vh:
<Layout hasSider={true} style={{ height: "100%", marginTop: 64 }}>
This adjustment resolves the double scroll bar issue as well.
UPDATE AND SOLUTION FOR NONSCROLLING SIDEBAR
To prevent the sidebar from scrolling, give the Sider component a specific height equivalent to what is visible on the screen.
The component renders in the DOM with a height based on its contained content. To achieve a non-scrolling sidebar, limit the height to the space below the navigation bar by calculating 100vh minus the nav bar's size in the CSS/LESS for the sidebar: height: calc(~"100vh - 64px"); and ensure overflow-y is set to auto.
.sidebar {
overflow-y: auto;
overflow-x: hidden;
height: calc(~"100vh - 64px");
position: fixed;
left: 0;
}
For an updated solution, refer to this codesandbox.
In future queries, it is recommended to focus on one main question for better responses.