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頁面正常把所有的代碼寫到一個頁面是可以的。