使用 Element UI 实现全屏的 el-container

在 Vue.js 项目中，Element UI 是一个广泛使用的 UI 组件库。它提供了许多预制的组件，可以帮助开发者更快速、更简便地构建出美观且功能丰富的用户界面。其中，el-container 是一个常用的布局组件，它可以帮助我们实现复杂的页面布局。

若要让 el-container 布满全屏，我们可以通过 CSS 来实现。这里是一个简单的示例：

首先，安装并引入 Element UI：

npm install element-ui --save

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

然后，在 Vue 组件中，我们可以这样使用 el-container：

<template>
  <el-container style="height: 100vh; display: flex; flex-direction: column;">
    <el-header style="height: 60px; background-color: #409EFF;">Header</el-header>
    <el-main style="flex: 1; background-color: #E9EEF3;">Main</el-main>
    <el-footer style="height: 60px; background-color: #409EFF;">Footer</el-footer>
  </el-container>
</template>
<script>
export default {
  name: 'FullScreenContainer'
}
</script>
<style scoped>
/* 这里可以根据需要添加一些自定义的样式 */
</style>

在上面的示例中，el-container 使用了 height: 100vh; 这个 CSS 属性，使得其高度等于视口的高度，即全屏。display: flex; 和 flex-direction: column; 这两个属性则使得 el-container 的子元素（el-header、el-main、el-footer）按照列方向排列。

此外，el-header、el-main、el-footer 的高度也分别进行了设置。其中，el-header 和 el-footer 的高度是固定的，而 el-main 的高度则使用了 flex: 1;，这意味着它会占据剩余的空间，从而使得整个 el-container 能够布满全屏。

需要注意的是，上述示例中的 CSS 样式都是内联样式，这意味着它们只作用于当前的 el-container。如果你希望这些样式能够作用于全局，可以将它们提取出来，放到一个单独的 CSS 文件中，并在 Vue 组件中通过 <style> 标签引入。

另外，Element UI 还提供了许多其他的布局组件和工具类，可以帮助我们更灵活地实现各种页面布局。具体的使用方法可以参考 Element UI 的官方文档。

希望这个示例能够对你有所帮助，如果你有任何疑问或建议，欢迎在评论区留言。