element-ui web page full screen

1. Set height: 100% in html, body, #app in App.vue;

//App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
html, body , #app{
  height: 100%;
}
</style>

2. Set the height of the first el-container in the layout page: 100%;

<template>
<el-container class="home-container">
  <el-header>Header</el-header>
  <el-container>
    <Aside></Aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
// @ is an alias to /src
import Aside from '../components/Aside'
export default {
  name: 'Home',
  components: { Aside }
}
</script>
<style lang="less">
.home-container {
  height: 100%;
}

 

Guess you like

Origin blog.csdn.net/cmax007/article/details/106378574