diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index 9dcd877d8..31f8d5860 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -1,14 +1,20 @@
 <template>
   <div class="app">
     <div class="page-header">
+      header
     </div>
-    <div class="page-container clearfix">
-      <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
-      <div class="page-content">
-        <router-view></router-view>
-        <footer-nav></footer-nav>
+    <div class="main-content">
+      <div class="page-container clearfix">
+        <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
+        <div class="page-content">
+          <router-view></router-view>
+          <footer-nav></footer-nav>
+        </div>
       </div>
     </div>
+    <div class="page-footer">
+      footer
+    </div>
   </div>
 </template>
 
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 0cd763351..d542eeddc 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -71,40 +71,73 @@ ul, ol {
   background-color: #fff;
 }
 
-.page-container {
+.main-content {
   margin: 40px 15px;
+}
+
+.page-container {
   background-color: #fff;
   position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1px;
-    height: 10000px;
-    top: 0;
-    left: 220px;
-    background-color: #E5E5E5;
-  }
+  display: table;
+  width: 100%;
 }
 
 .page-content {
   box-sizing: border-box;
   margin-left: 220px;
   padding: 0 40px;
+  display: table-cell;
 
   section {
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      color: #333;
+      line-height: 1.5;
+      margin: 20px 0;
+      font-weight: normal;
+
+      &:hover a {
+        opacity: .4;
+      }
+
+      a {
+        float: left;
+        margin-left: -20px;
+        opacity: 0;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .4;
+        }
+      }
+    }
+
+    > h1 {
+      font-size: 40px;
+    }
+
     > h2 {
       font-size: 36px;
-      color: #333;
-      margin: 20px 0;
-      line-height: 1.5;
     }
 
     > h3 {
       font-size: 30px;
-      color: #333;
-      margin: 23px 0;
+    }
+
+    > h4 {
+      font-size: 24px;
+    }
+
+    > h5 {
+      font-size: 20px
+    }
+
+    > h6 {
+      font-size: 16px;
     }
 
     > p {
@@ -141,26 +174,6 @@ ul, ol {
     }
   }
 
-  h2, h3, h4, h5 {
-    font-weight: normal;
-    color: #1f2f3d;
-
-    &:hover a {
-      opacity: .4;
-    }
-
-    a {
-      float: left;
-      margin-left: -20px;
-      opacity: 0;
-      cursor: pointer;
-
-      &:hover {
-        opacity: .4;
-      }
-    }
-  }
-
   p > code,
   .table code,
   li > code {
@@ -198,3 +211,8 @@ ul, ol {
   }
 }
 
+.page-footer {
+  height: 150px;
+  margin-top: 40px;
+  background-color: #fff;
+}
diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue
index 3dcae82c3..fe786fbbf 100644
--- a/docs/components/side-nav.vue
+++ b/docs/components/side-nav.vue
@@ -59,7 +59,8 @@ export default {
     width: 220px;
     box-sizing: border-box;
     padding: 40px 0;
-    float: left;
+    display: table-cell;
+    border-right: 1px solid #e5e5e5;
 
     li {
       list-style: none;