element-ui网页面全屏

最新推荐文章于 2024-08-06 10:24:12 发布

云上碧霄

最新推荐文章于 2024-08-06 10:24:12 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： vue

本文链接：https://blog.youkuaiyun.com/cmax007/article/details/106378574

element-ui 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现全屏布局，包括在App.vue中设置html、body及#app的高度为100%，以及在布局页面中对el-container组件进行高度设置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在App.vue中html, body, #app中设置height: 100%；

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

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

2、布局页面中第一个el-container设置height： 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%;
}