简单实现elementui的el-container布满全屏

要使用Element UI的<el-container>组件布满全屏，你需要确保父级容器的高度是100%。以下是一个简单的例子，展示如何实现这一点：




<template>
  <el-container style="height: 100vh;">
    <!-- 头部内容 -->
    <el-header>Header</el-header>
    <!-- 主体内容 -->
    <el-main>Main</el-main>
    <!-- 底部内容 -->
    <el-footer>Footer</el-footer>
  </el-container>
</template>
 
<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>

在这个例子中，<el-container>的样式设置为height: 100vh;，这表示它的高度将会是视口的100%。同时，确保移除了<html>和<body>的默认边距，以确保<el-container>可以正常地占据整个视口的空间。

简单实现elementui的el-container布满全屏

评论已关闭

推荐阅读