在刚开始用element-plus的布局时,发现无法占满屏幕:
在App.vue
中添加如下css代码:
css
<style>
html, body, #app {
margin: 0;
padding: 0;
height: 100%;
}
</style>
同时布局代码所在的component如下所示:
html
<template>
<div class="common-layout">
<el-container>
<el-header id="header">Header</el-header>
<el-main id="main">Main</el-main>
</el-container>
</div>
</template>
<script setup lang="ts">
</script>
<style>
.common-layout, .el-container {
height: 100%;
}
</style>
即可保证占满屏幕: