vue项目纵向撑满屏幕不出现滚动条，屏幕小于多少时固定屏幕大小

在项目最外面index.html加入解决

<style>
      html,
      body,
      #app {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: auto;
      }
  </style>

App.vue

<template>
	<div class="dade_app">
		<div style="width: 100%;height: 100vh;;background-color: rgb(199 197 197 / 18%);">
		<div style="width: 100%;background-color: #edf0ff;height: 43px;">
			<n-split :default-size="1" style="width: 100vh;color: #000000;">
				<template #1>
					<n-menu
						v-model:value="activeKey"
						mode="horizontal"
						:options="menuOptions"
						responsive
					/>
				</template>
			</n-split>
			<div style="position: absolute;margin-top: 6px;right: 50px;">
				<div style="display: flex;">
					<n-space align="flex-end">
						<n-avatar
						round
						size="small"
						src="https://picsum.photos/id/2/100/100"
						/>
					</n-space>
					<div style="margin-top: 2px;margin-left: 10px;">admin</div>
				</div>
			</div>
		</div>
		<div style="margin: 20px;">
			<div style="display: flex;justify-content:space-between;">
				<n-card title="商城系统" hoverable>
					国内顶级商城
				</n-card>
				<n-card title="ERP系统" hoverable>
					国内顶级ERP
				</n-card>
				<n-card title="物业系统" hoverable>
					国内顶级物业
				</n-card>
				<n-card  title="直播系统" hoverable>
					国内顶级直播
				</n-card>
				<n-card  title="AI" hoverable>
					国内顶级AI
				</n-card>
			</div>

			<div style="display: flex;justify-content:space-between;margin-top: 20px;">
				<n-card  title="h5" hoverable>
					国内顶级h5
				</n-card>
				<n-card  title="巡检系统" hoverable>
					国内顶级巡检
				</n-card>
				<n-card  title="财务系统" hoverable>
					国内顶级财务
				</n-card>
				<div class="n-card"></div>
				<div class="n-card"></div>
			</div>

		</div>
	</div>
	</div>
	
  </template>
  
  <script lang="ts">
  import type { MenuOption } from 'naive-ui'
  import type { Component } from 'vue'
  import {
	BookOutline as BookIcon,
	PersonOutline as PersonIcon,
	WineOutline as WineIcon
  } from '@vicons/ionicons5'
  import { NIcon } from 'naive-ui'
  import { defineComponent, h, ref } from 'vue'
  
  function renderIcon(icon: Component) {
	return () => h(NIcon, null, { default: () => h(icon) })
  }
  
  const menuOptions: MenuOption[] = [
	{
	  label: '应用列表',
	  key: 'hear-the-wind-sing',
	  icon: renderIcon(BookIcon)
	},
	{
	  label: '我的应用',
	  key: 'pinball-1973',
	  icon: renderIcon(BookIcon),
	},
	{
	  label: '权限管理',
	  key: 'a-wild-sheep-chase',
	  icon: renderIcon(BookIcon),
	},
	{
	  label: '设置',
	  key: 'dance-dance-dance',
	  icon: renderIcon(BookIcon),
	  children: [
		{
		  label: '系统设置',
		  key: 'xt'
		},
		{
		  label: '修改密码',
		  key: 'pwd'
		}
	  ]
	}
  ]
  
  export default defineComponent({
	setup() {
	  return {
		activeKey: ref<string | null>(null),
		menuOptions
	  }
	}
  })
</script>
<style>
	.n-card {
		max-width: 19%;
		height: 200px;
	}
	/* 控制屏幕小于多少时固定屏幕 */
	.dade_app{
		position: absolute;top: 0;left: 0;right: 0;height: calc(100vh);
		@media screen and (max-width: 1101px) {
			width: 1100px
		}
		@media screen and (min-width: 1100px) {
			width: 100%;
		}
	}
</style>