I am having a problem with using React and antd, I am using a component from the Layout page on antd. There is a comma that I believe is restricting the UI from filling out the page, although it might be somethign else to do with the design. What I am looking to fix is too have the UI fill the page instead of the height being restricted and having a comma below it.
React Layout being rendered in App.js:
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo"/>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined/>}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined/>}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined/>}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined/>}>
nav 4
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header className="site-layout-sub-header-background" style={{padding: 0}}/>
<Content style={{margin: '24px 16px 0'}}>
<div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
content
</div>
</Content>
<Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
I am very confused as to why there is a comma there if anyone has some suggestions any advice would be appreciated.