wenjunlong88_easy
wenjunlong88_easy
采纳率80.5%
2018-06-25 23:43 阅读 21.7k

el-container怎么实现满屏布局

5

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    u010008573 feniechen 2018-06-26 03:00
    点赞 评论 复制链接分享
  • dabocaiqq dabocaiqq 2018-06-26 01:02
    点赞 评论 复制链接分享
  • weixin_43018801 weixin_43018801 2019-03-14 18:38

    参考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

    点赞 评论 复制链接分享

相关推荐