1

src/components/main/main.less

@@ -25,11 +25,27 @@
     overflow: hidden;
     color: darkgray;
     display: flex;
+    flex: 1;
+    flex-direction: column;
   }
 
   .main-layout-con {
     display: flex;
-    display: -webkit-flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .header-con-main {
+    height: 64px;
+    flex-shrink: 0;
+  }
+
+  .main-layout-content {
+    height: calc(100% - 64px);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
   }
 

src/components/main/main.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <Layout style="height: 100%" class="main">
+  <Layout style="height: 100%; display: flex; flex-direction: row;" class="main">
 
     <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
       <div class="sidebar-brand" @click="goHome" v-if="!collapsed">
@@ -14,13 +14,13 @@
     <Content class="main-content-con">
       <Layout class="main-layout-con">
 
-        <Header>
+        <Header  class="header-con-main">
           <headerBar class="header-con" @on-coll-change="collpasedChange" :collapsed="collapsed">
             <Terminal></Terminal>
             <user :userName="userName" :user-avator="userAvator || ''" />
           </headerBar>
         </Header>
-        <Layout>
+        <Layout  class="main-layout-content">
           <Content class="content-wrapper">
 
             <router-view />