Layout Height Adjustment

src/layout/components/AppMain.vue

@@ -35,7 +35,8 @@ export default {
   padding-bottom: $footerHeight;
 
   &>div:not(.home-container) {
-    margin: 10px 0 0 10px;
+    height: calc(100vh - #{$layoutHeight});
+    padding: 10px 0 0 10px;
   }
 }
 

src/styles/variables.scss

@@ -22,8 +22,9 @@ $subMenuHover: #f0f2f5;
 $sideBarWidth: 210px;
 $siderBarCollapseWidth: 64px;
 $headerHeight: 120px;
-$footerHeight: 32px;
+$footerHeight: 32px; // must greater than 15px
 $tagHeight: 42px; // must greater than 40px
+$layoutHeight: $headerHeight + $footerHeight + $tagHeight;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass