vue框架之element- Container 页面整体布局

要达成的效果图如下：

 

我们发现，直接从element官网粘贴过来的代码是一段一段的，没有占满整个页面。参考了两个博文，最终如下

https://blog.csdn.net/cdebai/article/details/90324070，

https://blog.csdn.net/qq_36275889/article/details/94634397

/* 主要是添加这一段代码，我这是在另一个vue页面中添加的，我成它为 全局布局的vue*/
html,body,#app,.homeBox,.el-container{ /*设置内部填充为0，几个布局元素之间没有间距*/ padding: 0px; /*外部间距也是如此设置*/ margin: 0px; /*统一设置高度为100%*/ height: 100%; }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #EBEBEB;
    color: #2154FA;
    text-align: center;
    line-height: 100%;
  }

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

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

接下来添加下面标的三处

 

 我在这里遇到的问题是：

我把所有的添加到一个1.vue页面，这个1.vue页面有子路由，不管怎么添加都不能占满屏幕？？？？ 

接着我有把所有的代码写到一个空的2.vue页面，1.vue中的布局就是整体布局了，1.vue中的页面的样式也就是《style》中的那段代码删不删除都可以，

接着就大功告成了。但是这个问题还是没有解决？？

ps： 如果一个没有子路由的vue页面正常把所有的代码写到一个页面是可以的。