fix: #45 height overflow

Author: sendya

src/App.vue

@@ -1,46 +1,51 @@
-<template>
-  <a-locale-provider :locale="locale">
-    <div id="app">
-      <router-view/>
-    </div>
-  </a-locale-provider>
-</template>
-
-<script>
-  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-  import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
-  import { version } from 'ant-design-vue'
-
-  export default {
-    data () {
-      return {
-        locale: zhCN,
-        version
-      }
-    },
-    mounted () {
-      const { $store } = this
-      console.log('use Ant-Design Of Vue:', version)
-      deviceEnquire(deviceType => {
-
-        switch (deviceType) {
-          case DEVICE_TYPE.DESKTOP:
-            $store.commit('TOGGLE_DEVICE', 'desktop')
-            $store.dispatch('setSidebar', true)
-            break
-          case DEVICE_TYPE.TABLET:
-            console.log('tablet')
-            $store.dispatch('ToggleDevice', 'tablet')
-            $store.dispatch('setSidebar', false)
-            break
-          case DEVICE_TYPE.MOBILE:
-          default:
-            $store.commit('TOGGLE_DEVICE', 'mobile')
-            $store.dispatch('setSidebar', false)
-            break
-        }
-        console.log('deviceType', deviceType)
-      })
-    }
-  }
-</script>
+<template>
+  <a-locale-provider :locale="locale">
+    <div id="app">
+      <router-view/>
+    </div>
+  </a-locale-provider>
+</template>
+
+<script>
+  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+  import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
+  import { version } from 'ant-design-vue'
+
+  export default {
+    data () {
+      return {
+        locale: zhCN,
+        version
+      }
+    },
+    mounted () {
+      const { $store } = this
+      console.log('use Ant-Design Of Vue:', version)
+      deviceEnquire(deviceType => {
+
+        switch (deviceType) {
+          case DEVICE_TYPE.DESKTOP:
+            $store.commit('TOGGLE_DEVICE', 'desktop')
+            $store.dispatch('setSidebar', true)
+            break
+          case DEVICE_TYPE.TABLET:
+            console.log('tablet')
+            $store.dispatch('ToggleDevice', 'tablet')
+            $store.dispatch('setSidebar', false)
+            break
+          case DEVICE_TYPE.MOBILE:
+          default:
+            $store.commit('TOGGLE_DEVICE', 'mobile')
+            $store.dispatch('setSidebar', false)
+            break
+        }
+        console.log('deviceType', deviceType)
+      })
+    }
+  }
+</script>
+<style>
+  #app {
+    height: 100%;
+  }
+</style>

src/components/page/GlobalFooter.vue

@@ -1,58 +1,55 @@
-<template>
-  <div class="footer">
-    <div class="links">
-      <a href="https://pro.ant.design/" target="_blank">Pro 首页</a>
-      <a href="https://github.com/ant-design/ant-design-pro" target="_blank">
-        <a-icon type="github"/>
-      </a>
-      <a href="https://ant.design/">Ant Design</a>
-      <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
-      <a>Antd-Vue Version@{{ version }}</a>
-    </div>
-    <div class="copyright">
-      Copyright
-      <a-icon type="copyright"/>
-      2018 <span>白鹭学园技术组出品</span>
-    </div>
-  </div>
-</template>
-
-<script>
-  import { version } from 'ant-design-vue'
-  export default {
-    name: 'LayoutFooter',
-    data () {
-      return {
-        version
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .footer {
-    padding: 0 16px;
-    margin: 48px 0 24px;
-    text-align: center;
-
-    .links {
-      margin-bottom: 8px;
-
-      a {
-        color: rgba(0, 0, 0, .45);
-
-        &:hover {
-          color: rgba(0, 0, 0, .65);
-        }
-
-        &:not(:last-child) {
-          margin-right: 40px;
-        }
-      }
-    }
-    .copyright {
-      color: rgba(0, 0, 0, .45);
-      font-size: 14px;
-    }
-  }
+<template>
+  <div class="footer">
+    <div class="links">
+      <a href="https://pro.ant.design/" target="_blank">Pro 首页</a>
+      <a href="https://github.com/ant-design/ant-design-pro" target="_blank">
+        <a-icon type="github"/>
+      </a>
+      <a href="https://ant.design/">Ant Design</a>
+      <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
+    </div>
+    <div class="copyright">
+      Copyright
+      <a-icon type="copyright"/>
+      2018 <span>白鹭学园技术组出品</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LayoutFooter',
+    data () {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .footer {
+    padding: 0 16px;
+    margin: 48px 0 24px;
+    text-align: center;
+
+    .links {
+      margin-bottom: 8px;
+
+      a {
+        color: rgba(0, 0, 0, .45);
+
+        &:hover {
+          color: rgba(0, 0, 0, .65);
+        }
+
+        &:not(:last-child) {
+          margin-right: 40px;
+        }
+      }
+    }
+    .copyright {
+      color: rgba(0, 0, 0, .45);
+      font-size: 14px;
+    }
+  }
 </style>