使用Ant Design的Layout布局不能撑满整个屏幕问题解决方法

代码示例：

import React, { useState } from 'react'
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Layout, Menu, theme } from 'antd'
import routes from './routes/index'
import { useNavigate, useRoutes } from 'react-router-dom'
const { Header, Content, Sider } = Layout

const titleMenu: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
  key,
  label: `标题 ${key}`,
}))

const siderMenu: MenuProps['items'] = [
  {
    key: 'home',
    icon: <UserOutlined />,
    label: '人员管理',
  },
  {
    key: 'about',
    icon: <NotificationOutlined />,
    label: '关于系统',
  },
  {
    key: 'info',
    icon: <LaptopOutlined />,
    label: '信息管理',
    children: [
      {
        key: 'info-detail',
        label: '信息详情',
      },
      {
        key: 'info-look',
        label: '信息查询',
      },
    ],
  },
  {
    key: 'statistics',
    icon: <NotificationOutlined />,
    label: '资产中心',
  },
]

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken()
  const routeView = useRoutes(routes)
  const navigate = useNavigate()
  const [breadcrumbName, setBreadcrumbName] = useState('home')
  const handleSiderClick: MenuProps['onClick'] = ({ key, keyPath }) => {
    const name = keyPath.reverse().join('/') || ''
    setBreadcrumbName(name)
    if (key !== 'home' && key !== 'about') return
    navigate(key, {
      replace: false,
      state: {
        id: key,
      },
    })
  }

  return (
    <Layout>
      <Header className='header'>
        <div className='logo' />
        <Menu
          theme='dark'
          mode='horizontal'
          defaultSelectedKeys={['1']}
          items={titleMenu}
        />
      </Header>
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode='inline'
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
            items={siderMenu}
            onClick={handleSiderClick}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <div style={{ margin: '16px 0' }}>{breadcrumbName}</div>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            {routeView}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default App

修改css样式：

#root,body,html {
  height: 100%;
}

.ant-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
}

修改最外框组件就可以使整个布局平铺页面

原文地址：https://blog.csdn.net/m0_69892739/article/details/143586134

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！