<template>
<el-container class="layout_container">
<el-aside class="layout_slider">Aside</el-aside>
<el-container class="layout_right_main">
<el-header class="layout_head">Header</el-header>
<el-main class="layout_main">Main</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.layout_container{
width: 100%; //默认本来也是100%
height: 100vh;
.layout_slider{
background-color: #001529;
color: #fff;
width: 260px;
}
.layout_right_main{
background-color: pink;
.layout_head{
background-color: antiquewhite;
}
.layout_main{
background-color: aquamarine;
}
}
}
</style>
效果如下:
天呀,居然只用了一行height:100vh就搞定了,而且可以兼容各个分辨率下的屏幕