el-container怎么实现满屏布局

向各位大佬请教:
我在vuejs项目中使用element-ui进行页面布局,el-container作为容器,子元素为el-header,el-main,el-main只有一张logo图片,el-header只有一个登录框,那么el-container怎么实现满屏布局呢?
望各位大佬不吝赐教!小白我十分感谢!

3个回答

qq_41287679
几许0725 回复wenjunlong88_easy: 感谢
12 个月之前 回复
github_38546328
秋豆麻袋 回复wenjunlong88_easy: 谢谢
一年多之前 回复
lys20054140624
lys20054140624 回复wenjunlong88_easy: nb
一年多之前 回复
breavo_raw
皇家茶壶 回复wenjunlong88_easy: 这个好使,谢谢
接近 2 年之前 回复
zhongxunking
zhongxunking 回复wenjunlong88_easy: 你的才是正解,感谢
大约 2 年之前 回复
wenjunlong88_easy
wenjunlong88_easy <div id="app" style="position:absolute; left:0; top:0; width:100%;height:100%;">
大约 2 年之前 回复

参考https://www.cnblogs.com/lccluyan/p/8351787.html
不知道你们能不能用到
图片说明
代码样例

<template>
  <el-container>
    <el-header>Header 默认 height: 60px;</el-header>
    <el-container :style="height">
      <el-aside width="200px">Aside</el-aside>
      <el-main>
        <el-col>
          <span>Main</span>
        </el-col>
        <el-col>
          <span>height:window.innerHeight - 120</span>
        </el-col>
        <el-col>
          <span>(右侧通常会有上下滚动栏,120 + 16左右就会消失)</span>
        </el-col>
      </el-main>
    </el-container>
    <el-footer>Footer 默认 height: 60px;</el-footer>
  </el-container>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

<script>
export default {
  data () {
    return {
      height: {
        height: window.innerHeight - 136 + 'px'
      }
    }
  }
}
</script>

图片说明

参考https://www.cnblogs.com/lccluyan/p/8351787.html

xuanmobaobao
轩墨宝宝 这个不错
大约一年之前 回复
qwty146
陆秋之 你这个才是正解,前面贴的答案有点答非所问,用position:absolute那还不如不用布局控件呢。
一年多之前 回复
qwty146
陆秋之 你这个
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐