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

news2024/11/23 20:40:20

在这里插入图片描述

代码示例:

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%;
}

在这里插入图片描述
修改最外框组件就可以使整个布局平铺页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238448.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ubuntu18.04】使用U盘制作ubuntu18.04启动盘操作说明

打开show application 打开Startup Disk 选择镜像 双击选择ubuntu的iso镜像 镜像下载地址 Ubuntu 18.04.6 LTS (Bionic Beaver) 制作镜像 注意&#xff1a; 制作镜像会格式化U盘&#xff0c;记得备份资料 点击Make Startup Disk,弹出如下对话框 点击Yes 输入管理员密码&a…

22.04Ubuntu---ROS2创建python节点

创建工作空间 mkdir -p 02_ros_ws/src 然后cd到该目录 创建功能包 在这条命令里&#xff0c;tom就是你的功能包 ros2 pkg create tom --build-type ament_python --dependencies rclpy 可以看到tom功能包已经被创建成功了。 使用tree命令&#xff0c;得到如下文件结构 此时…

《手写Spring渐进式源码实践》实践笔记(第十七章 数据类型转换)

文章目录 第十七章 数据类型转换工厂设计实现背景技术背景Spring数据转换实现方式类型转换器&#xff08;Converter&#xff09;接口设计实现 业务背景 目标设计实现代码结构类图实现步骤 测试事先准备属性配置文件转换器工厂Bean测试用例测试结果&#xff1a; 总结 第十七章 数…

使用docker形式部署jumpserver

文章目录 前言一、背景二、使用步骤1.基础环境准备2.拉取镜像3.进行部署4.备份记录启动命令 前言 记录一下使用docker形式部署jumpserver服务的 一、背景 搭建一个jumpserver的堡垒机&#xff0c;但是发现之前是二进制文件部署的&#xff0c;会在物理机上部署污染环境&#x…

(62)使用RLS自适应滤波器进行系统辨识的MATLAB仿真

文章目录 前言一、基本概念二、RLS算法原理三、RLS算法的典型应用场景四、MATLAB仿真代码五、仿真结果1.滤波器的输入信号、参考信号、输出信号、误差信号2.对未知系统进行辨识得到的系数 总结与后续 前言 RLS&#xff08;递归最小二乘&#xff09;自适应滤波器是一种用于系统…

算法每日双题精讲——滑动窗口(长度最小的子数组,无重复字符的最长子串)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…

MySQL数据库的备份与还原

目录 mysql 数据库的备份 生成SQL脚本 1 在控制台使用mysqldump命令可以用来生成指定数据库的脚本 ​编辑2 在数据库图形化界面工具&#xff1a;DateGrip 中操作&#xff1a;导出 mysql 数据库的还原 执行SQL脚本 1 在控制台使用 命令&#xff0c;指定将sql脚本导入到指定…

使用 IDEA 创建 Java 项目(二)

IDEA 创建 Java 项目 一般创建 Java 项目可以创建一个空项目&#xff0c;然后在空项目中添加模块&#xff0c;在模块中编写包&#xff0c;包中包含 Java 类。 如果你的 JDK 没有被 IDEA 自动找到的话&#xff0c;可以手动选择 JDK。我们先来学习 Intellij 构建系统下的 Java …

图论算法:最短路径算法详解【c语言版】(无权最短路径、Dijkstra算法)

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 图论算法&#xff1a;最短路径算法详解 在图论中&#xff0c;最短路径问题是寻找图中两点之间具有最小总权重的路径。这个问题在许多实际应用中都有重要的作用&#xff0c;比如网络路由、城市交通规…

vue通过iframe方式嵌套grafana图表

文章目录 前言一、iframe方式实现xxx.xxx.com拒绝连接登录不跳转Cookie 的SameSite问题解决不显示额外区域(kiosk1) 前言 我们的前端是vue实现的&#xff0c;监控图表是在grafana中的&#xff0c;需要在项目web页面直接显示grafana图表 一、iframe方式实现 xxx.xxx.com拒绝连…

苹果系统安装Homebrew时CLT缺失的问题

前言 为了使用brew命令&#xff0c;必须安装Homebrew工具。但是在Howebrew安装的时候&#xff0c;会出现CLT&#xff08;Command Line Tools&#xff09;缺失的问题。本博客就是讨论如何来解决这个问题的。 1、问题的出现 2、解决途径 在命令行终端中输入命令&#xff1a;xcod…

LeetCode Hot100 49.字母异位词分组

题干&#xff1a; 思路&#xff1a; 输入的是一个字符串数组&#xff0c;输出是一个列表&#xff0c;首先我们需要通过遍历数组获得每一个字符串&#xff0c;我们想要判断获得的任意两个字符串是不是字母异位词&#xff0c;所以可以将获得的字符串排序&#xff08;转换为字符数…

小白初入Android_studio所遇到的坑以及怎么解决

1. 安装Android_studio 参考&#xff1a;Android Studio 安装配置教程 - Windows(详细版)-CSDN博客 Android Studio超级详细讲解下载、安装配置教程&#xff08;建议收藏&#xff09;_androidstudio-CSDN博客 想下旧版本的android_studio的地址&#xff08;仅供参考&#xf…

游戏引擎中LOD渲染技术

一.LOD(Level Of Detail) 为了降低GPU渲染压力,根据摄像机距离模型距离将面数较高的模型替换为面数较低的模型. LOD LOD0(distance<10) LOD1(distance<20) LOD2(distance<30) 故通常引擎中MetaMesh是由一个或多个LOD模型构成. MetaMesh mesh mesh.lod1 mesh.lod…

论文阅读《Structure-from-Motion Revisited》

摘要 增量式地运动结构恢复是从无序图像集合中进行三维重建的一个普遍策略。虽然增量式地重建系统在各个方面上都取得了巨大的进步&#xff0c;但鲁棒性、准确性、完整度和尺度仍然是构建真正通用管道的关键问题。我们提出了一种新的运动结构恢复技术&#xff0c;它改进了目前…

【人工智能训练师】3 集群搭建

开启集群环境 本次环境为单节点伪集群环境&#xff0c;环境中已经安装JDK1.8、Hadoop2.7.7、Mysql5.7、hive2.3.4。— 1.环境中已经安装/root/software/hadoop-2.7.7&#xff0c;格式化HDFS&#xff0c;开启集群&#xff0c;查看集群状态。&#xff08;HDFS端口为9000&#x…

使用 GPT-4V 全面评估泛化情绪识别 (GER)

概述 由于情绪在人机交互中扮演着重要角色&#xff0c;因此情绪识别备受研究人员关注。目前的情感识别研究主要集中在两个方面&#xff1a;一是识别刺激物引起的情感&#xff0c;并预测观众观看这些刺激物后的感受。另一个方面是分析图像和视频中的人类情绪。在本文中&#xf…

8.机器学习--决策树

(⊙﹏⊙)下周有要开组会&#xff0c;不知道该说啥&#xff0c;啊啊啊啊&#x1f62b; 目录 1.基本概念 2.ID3算法 3.C4.5算法 4.CART算法 5.连续与缺失值处理 5.1.连续值处理 5.2.缺失值处理 6.剪枝处理 6.1.预剪枝策略 6.2.后剪枝策略 7.实例代码 1.基本概念 提…

uniApp之uni-file-picker使用踩坑

标题党~也不算坑吧 就是初体验 上传是需要存储一下子的&#xff0c;我以为uniApp是自己免费开的服务给大家中转使用&#xff0c;就没管这个事&#xff0c;但是官网是这么说的&#xff1a; 就我是怎么发现的&#xff0c;使用了一段时间后&#xff0c;上传的图片都裂了&#xff…

22.04Ubuntu---ROS2使用rclcpp编写节点C++

节点需要存在于功能包当中&#xff0c;功能包需要存在于工作空间当中。 所以我们要想创建节点&#xff0c;就要先创建一个工作空间&#xff0c;再创建功能包。 第一步&#xff1a;创建工作空间 mkdir -p chapt2_ws/src/ 第二步&#xff1a;创建example_cpp功能包&#xff0c…