如何使 ant 布局设计适合页面

Question

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.

UI screenshot

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.

Answer 1

Try checking your css files including frameworks like bootstrap to see if they are messing with your design