diff --git a/design.sketch.REMOVED.git-id b/design.sketch.REMOVED.git-id
index d1b872e8..5902db6b 100644
--- a/design.sketch.REMOVED.git-id
+++ b/design.sketch.REMOVED.git-id
@@ -1 +1 @@
-4b819d117b3b7e87effa763dbb04ba3280622cf1
\ No newline at end of file
+161855f41fee4ef5f7f2cf7f5285cd68edea3007
\ No newline at end of file
diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
index cc7412da..22370e5c 100644
--- a/docs/zh/guide/change-log.md
+++ b/docs/zh/guide/change-log.md
@@ -6,26 +6,29 @@
 这是正在开发的版本，还没有正式发布
 :::
 
-* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 `数据` + `递归组件` 实现无限制多级菜单
+* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 数据 + 递归组件 实现无限制多级菜单
 * [ 修改 ] 路由注册回归最简单的写法
-* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
-* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
-* [ 修复 ] 修复 `d2-highlight` 组件和 `d2-markdown` 组件的样式冲突
-* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
+* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 d2-app-loading 前缀
+* [ 修改 ] 所有类似 dd- 的样式前缀(包括自动注册图标的id前缀)统一改为 d2-
+* [ 修复 ] 修复 d2-highlight 组件和 d2-markdown 组件的样式冲突
+* [ 修改 ] 内置组件名称统一改为 d2- 前缀，统一使用横线连接 (kebab-case) 风格
 * [ 修改 ] 顶栏 logo 阴影删除
 * [ 新增 ] 主题系统
 * [ 新增 ] 三个主题，分别为 d2admin 经典，简约线条，流星
-* [ 修改 ] `d2-markdown` 组件 `md` 参数改名为 `source`
-* [ 修改 ] 删除了 `d2-markdown` 组件中图片的白色背景
-* [ 修改 ] 删除 `timeago` 插件，更换为更强大的 `dayjs`
-* [ 新增 ] `Tomorrow Night Blue` 主题
-* [ 修改 ] `src/assets/style/public-class.scss` 写法优化
+* [ 修改 ] d2-markdown 组件 md 参数改名为 source
+* [ 修改 ] 删除了 d2-markdown 组件中图片的白色背景
+* [ 修改 ] 删除 timeago 插件，更换为更强大的 dayjs
+* [ 新增 ] Tomorrow Night Blue 主题
+* [ 修改 ] src/assets/style/public-class.scss 写法优化
 * [ 新增 ] [vue-bigdata-table](https://github.com/lison16/vue-bigdata-table)组件
 * [ 修复 ] 侧边栏内容超过一屏后显示错误
 * [ 新增 ] 自定义滚动条演示页面
 * [ 新增 ] 流星主题新增背景图片上层的半透明遮罩
 * [ 修复 ] 主题设置失效bug
 * [ 修复 ] router守卫验证登陆部分代码修改
+* [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
+* [ 修复 ] d2-container 组件重构 flex 布局
+* [ 新增 ] 404 page
 
 ## v1.0.0
 
diff --git a/package.json b/package.json
index d4f0f0f0..fa74fbf1 100755
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@antv/data-set": "^0.8.5",
     "@antv/g2": "^3.0.4",
     "axios": "^0.17.1",
+    "better-scroll": "^1.12.1",
     "clipboard-polyfill": "^2.4.1",
     "countup.js": "^1.9.3",
     "dayjs": "^1.6.7",
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 8dffd24a..7535129a 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-76b231c8f2b45f72c095f47ab055fbebb41ff160
\ No newline at end of file
+7951ca687a987c2f872c6a63ac497cfc58cba7dc
\ No newline at end of file
diff --git a/src/components/core/d2-container-full/index.vue b/src/components/core/d2-container-full/index.vue
deleted file mode 100644
index 7432efcc..00000000
--- a/src/components/core/d2-container-full/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="d2-container-full" :style="cardStyle">
-    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
-      <slot name="header"/>
-    </div>
-    <div class="d2-container-full__body" :style="bodyStyle">
-      <slot/>
-    </div>
-    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
-      <slot name="footer"/>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'd2-container-full',
-  props: {
-    // 定位 上 右 下 左
-    top: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    right: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    bottom: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    left: {
-      type: Number,
-      required: false,
-      default: 0
-    }
-  },
-  data () {
-    return {
-      headerHeight: 0,
-      footerHeight: 0
-    }
-  },
-  mounted () {
-    this.headerHeight = this.$slots.header ? this.$refs.header.offsetHeight : 0
-    this.footerHeight = this.$slots.footer ? this.$refs.footer.offsetHeight : 0
-  },
-  computed: {
-    cardStyle () {
-      return {
-        top: `${this.top}px`,
-        right: `${this.right}px`,
-        bottom: `${this.bottom}px`,
-        left: `${this.left}px`
-      }
-    },
-    bodyStyle () {
-      return {
-        top: `${this.headerHeight}px`,
-        bottom: `${this.footerHeight}px`
-      }
-    }
-  }
-}
-</script>
diff --git a/src/components/core/d2-container/components/d2-container-full.vue b/src/components/core/d2-container/components/d2-container-full.vue
new file mode 100644
index 00000000..dc8b222c
--- /dev/null
+++ b/src/components/core/d2-container/components/d2-container-full.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="d2-container-full">
+    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-full__body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-full'
+}
+</script>
+
+<style lang="scss" scoped>
+// [组件] d2-container-full
+.d2-container-full {
+  position: absolute;
+  top: 0px;
+  right: 20px;
+  bottom: 0px;
+  left: 0px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .d2-container-full__header {
+    padding: 20px;
+  }
+  .d2-container-full__body {
+    flex-grow: 1;
+    padding: 20px;
+    overflow: auto;
+  }
+  .d2-container-full__footer {
+    padding: 20px;
+  }
+}
+</style>
diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue
index 832402ac..7647124f 100644
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -11,7 +11,7 @@
       <slot/>
     </div>
     <!-- [container-full] 撑满 -->
-    <d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
+    <d2-container-full v-if="type === 'full'">
       <slot v-if="$slots.header" name="header" slot="header"/>
       <slot/>
       <slot v-if="$slots.footer" name="footer" slot="footer"/>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import d2ContainerFull from './components/d2-container-full.vue'
 export default {
   name: 'd2-container',
   props: {
@@ -37,7 +38,7 @@ export default {
     }
   },
   components: {
-    'd2-container-full': () => import('../d2-container-full/index.vue')
+    'd2-container-full': d2ContainerFull
   }
 }
 </script>
diff --git a/src/components/core/register.js b/src/components/core/register.js
index d5c9854b..fffddae7 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -3,11 +3,14 @@ import Vue from 'vue'
 import { GridLayout, GridItem } from 'vue-grid-layout'
 import SplitPane from 'vue-splitpane'
 
+// 主容器
+import d2Container from '@/components/core/d2-container'
+
 Vue.component('d2-grid-layout', GridLayout)
 Vue.component('d2-grid-item', GridItem)
 Vue.component('SplitPane', SplitPane)
 
-Vue.component('d2-container', () => import('@/components/core/d2-container'))
+Vue.component('d2-container', d2Container)
 Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
 Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
 Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
diff --git a/src/menu/index.js b/src/menu/index.js
index bd54a5a2..556dfa29 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -38,6 +38,14 @@ const demoPlugins = {
         { path: `${pre}i18n/demo2`, title: '示例2' }
       ]
     },
+    {
+      path: `${pre}better-scroll`,
+      title: '滚动扩展',
+      children: [
+        { path: `${pre}better-scroll/base`, title: '基础用法' },
+        { path: `${pre}better-scroll/to`, title: '滚动定位' }
+      ]
+    },
     { path: `${pre}build`, title: '环境区分' },
     { path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
     { path: `${pre}day`, title: '日期计算' },
@@ -88,7 +96,7 @@ const demoComponents = {
       ]
     },
     { path: `${pre}bigdata-table`, title: '百万数量级表格' },
-    { path: `${pre}scrollbar`, title: '滚动条' },
+    { path: `${pre}scrollbar`, title: 'ElementUI 滚动条组件' },
     { path: `${pre}countup`, title: '数字动画' },
     { path: `${pre}editor-quill`, title: '富文本编辑器' },
     { path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },
diff --git a/src/pages/core/404/index.vue b/src/pages/core/404/index.vue
new file mode 100644
index 00000000..7bc892c7
--- /dev/null
+++ b/src/pages/core/404/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="page-404">
+    <img src="/static/image/page/404/cover@2x.png">
+    <el-button class="d2-mt" @click="$router.replace({ path: '/' })">
+      返回首页
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page-404 {
+  background-color: #555555;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  img {
+    width: 196px;
+    user-select: none;
+  }
+}
+</style>
+
diff --git a/src/pages/demo/components/container/full.vue b/src/pages/demo/components/container/full.vue
index 8b87b365..dda4d5b4 100644
--- a/src/pages/demo/components/container/full.vue
+++ b/src/pages/demo/components/container/full.vue
@@ -5,7 +5,7 @@
     </template>
     <d2-markdown :source="doc"/>
     <template slot="footer">
-      我是插入到 footer 中的内容
+      <d2-demo-link-btn title="D2Admin" link="https://github.com/FairyEver/d2admin-vue-element"/>
     </template>
   </d2-container>
 </template>
diff --git a/src/pages/demo/plugins/better-scroll/base.vue b/src/pages/demo/plugins/better-scroll/base.vue
new file mode 100644
index 00000000..701c58ab
--- /dev/null
+++ b/src/pages/demo/plugins/better-scroll/base.vue
@@ -0,0 +1,47 @@
+<template>
+  <d2-container>
+    <template slot="header">基础用法</template>
+    <div ref="wrapper" class="demo-bs-wrapper">
+      <div>
+        <div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
+      </div>
+    </div>
+  </d2-container>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    this.BS = new BScroll(this.$refs.wrapper, {
+      mouseWheel: true
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.demo-bs-wrapper {
+  height: 200px;
+  width: 300px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $color-border-1;
+  border-radius: 4px;
+  .demo-bs-item {
+    line-height: 40px;
+    padding-left: 10px;
+    border-bottom: 1px solid $color-border-4;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>
+
diff --git a/src/pages/demo/plugins/better-scroll/to.vue b/src/pages/demo/plugins/better-scroll/to.vue
new file mode 100644
index 00000000..93e085d9
--- /dev/null
+++ b/src/pages/demo/plugins/better-scroll/to.vue
@@ -0,0 +1,90 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">滚动定位</template>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div ref="wrapper" class="demo-bs-wrapper">
+          <div>
+            <div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="16">
+        <div class="d2-mb">
+          <p>滚动时间 ms</p>
+          <el-slider v-model="time" :min="100" :max="3000"></el-slider>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
+            <el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
+          </el-button-group>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
+            <el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
+          </el-button-group>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
+            <el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
+            <el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
+          </el-button-group>
+        </div>
+      </el-col>
+    </el-row>
+    <template slot="footer">
+      <d2-demo-link-btn title="文档" link="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  data () {
+    return {
+      time: 300,
+      BS: null
+    }
+  },
+  mounted () {
+    this.BS = new BScroll(this.$refs.wrapper, {
+      mouseWheel: true
+    })
+  },
+  methods: {
+    handleScrollTo (y) {
+      this.BS.scrollTo(0, -y, this.time)
+    },
+    handleScrollBy (y) {
+      this.BS.scrollBy(0, -y, this.time)
+    },
+    handleScrollToElement (n) {
+      this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.demo-bs-wrapper {
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $color-border-1;
+  border-radius: 4px;
+  .demo-bs-item {
+    line-height: 40px;
+    padding-left: 10px;
+    border-bottom: 1px solid $color-border-4;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>
+
diff --git a/src/router/index.js.REMOVED.git-id b/src/router/index.js.REMOVED.git-id
index 90adffa6..379cbd2d 100644
--- a/src/router/index.js.REMOVED.git-id
+++ b/src/router/index.js.REMOVED.git-id
@@ -1 +1 @@
-98262236d74b49a612e6be6ba8cac9307d0fc023
\ No newline at end of file
+ddf919108dc68f1f7811c033e619dd82d94ef14c
\ No newline at end of file
diff --git a/static/image/page/404/cover@2x.png.REMOVED.git-id b/static/image/page/404/cover@2x.png.REMOVED.git-id
new file mode 100644
index 00000000..79cb9eea
--- /dev/null
+++ b/static/image/page/404/cover@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+139f15ecdee8d06f66d7fb57a30f6ec9e76b6103
\ No newline at end of file