vite+vue+ts+element-plus从零开发管理后台框架(04)-整体布局

布局参考 文档，整体使用上、左、右的布局。

编辑src/views/Main.vue，内容如下。

<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside>Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>


<style scoped>
.el-header {
    background-color: red;
}

.el-aside {
    background-color: green;
}

.el-main {
    background-color: blue;
}
</style>

浏览器访问 localhost:5173/#/ ，会发现高度没有铺满。

编辑src/style.css，添加如下内容。

/* Element Plus el-container 高度 100%, > 符号是表示直接子元素 */
html,
body,
body>#app,
#app>.el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

保存后再查看浏览器，发现高度已经铺满了。

本作品采用《CC 协议》，转载必须注明作者和本文链接