diff --git a/examples/routers/drawer.vue b/examples/routers/drawer.vue
index 720ac0f..3559caa 100644
--- a/examples/routers/drawer.vue
+++ b/examples/routers/drawer.vue
@@ -1,75 +1,208 @@
 <template>
-    <Row :gutter="16">
-        <i-col span="12">
-            <Card title="horizontal divider">
-                <div>
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
+    <div>
+        <Button @click="visible = true">show1</Button>
+        <Button @click="visible2 = true">show2</Button>
+        <Button @click="visible3 = true">show3</Button>
+        <Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <Button @click="visible2 = true">show2</Button>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+        </Drawer>
 
-                    <Divider/>
-
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
-
-                    <Divider>iView </Divider>
-
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
-
-                    <Divider dashed/>
-
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
-
-                    <Divider orientation="left">iView</Divider>
-
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
-
-                    <Divider orientation="right">iView</Divider>
-
-                    <p>
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                        iView is a set of UI components and widgets built on Vue.js.
-                    </p>
-
-                </div>
-            </Card>
-        </i-col>
-        <i-col span="12">
-            <Card title="vertical divider">
-                <div>
-                    iView
-                    <Divider type="vertical" />
-                    <a href="#">Components</a>
-                    <Divider type="vertical" />
-                    <a href="#">Divider</a>
-                </div>
-            </Card>
-        </i-col>
-    </Row>
+        <Drawer v-model="visible2" title="抽屉标题" placement="right">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容22</p>
+        </Drawer>
+        <Drawer v-model="visible3" placement="left">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容22</p>
+        </Drawer>
+    </div>
 </template>
 
 <script>
-    export default {}
+    export default {
+        data () {
+            return {
+                visible: false,
+                visible2: false,
+                visible3: false,
+                styles: {
+                    height: 'calc(100% - 55px)',
+                    paddingBottom: '53px',
+                },
+                ms: {
+                    backgroundColor: 'rgba(255,0,255,0.5)'
+                }
+            };
+        }
+    };
 </script>
 
 <style>
-
+body{
+    height: 2000px;
+}
 </style>
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 1e9a42f..18caed9 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -4,8 +4,8 @@
             <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
-            <transition name="fade">
-                <div class="ivu-drawer" :style="mainStyles" v-show="visible">
+            <transition :name="'move-' + placement">
+                <div :class="classes" :style="mainStyles" v-show="visible">
                     <div :class="contentClasses" ref="content">
                         <a class="ivu-drawer-close" v-if="closable" @click="close">
                             <slot name="close">
@@ -24,13 +24,14 @@
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
     import TransferDom from '../../directives/transfer-dom';
+    import Emitter from '../../mixins/emitter';
     import ScrollbarMixins from '../modal/mixins-scrollbar';
 
     const prefixCls = 'ivu-drawer';
 
     export default {
         name: 'Drawer',
-        mixins: [ ScrollbarMixins ],
+        mixins: [ Emitter, ScrollbarMixins ],
         components: { Icon },
         directives: { TransferDom },
         props: {
@@ -60,6 +61,9 @@
             maskStyle: {
                 type: Object
             },
+            styles: {
+                type: Object
+            },
             scrollable: {
                 type: Boolean,
                 default: false
@@ -124,6 +128,15 @@
                     }
                 ];
             },
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.placement}`,
+                    {
+                        [`${prefixCls}-no-header`]: !this.showHead,
+                    }
+                ];
+            }
         },
         methods: {
             close () {
diff --git a/src/styles/components/drawer.less b/src/styles/components/drawer.less
index dd9767e..ab5ce1f 100644
--- a/src/styles/components/drawer.less
+++ b/src/styles/components/drawer.less
@@ -1,5 +1,84 @@
 @drawer-prefix-cls: ~"@{css-prefix}drawer";
 
 .@{drawer-prefix-cls} {
+    width: auto;
+    height: 100%;
+    position: fixed;
+    top: 0;
 
+    &-left{
+        left: 0;
+    }
+    &-right{
+        right: 0;
+    }
+
+    &-hidden {
+        display: none !important;
+    }
+
+    &-wrap {
+        position: fixed;
+        overflow: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: @zindex-drawer;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+    }
+
+    &-wrap * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    &-mask {
+        .mask;
+    }
+
+    &-content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background-color: #fff;
+        border: 0;
+        background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
+    }
+
+    &-header {
+        .content-header;
+    }
+
+    &-close {
+        z-index: 1;
+        .content-close(1px, 31px);
+    }
+
+    &-body {
+        width: 100%;
+        height: calc(~'100% - 51px');
+        padding: 16px;
+        font-size: 12px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        position: absolute;
+        overflow: auto;
+    }
+
+    &-no-header &-body{
+        height: 100%;
+    }
+
+    &-no-mask{
+        pointer-events: none;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 7ca4a3e..3d6242b 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -166,6 +166,7 @@
 @zindex-back-top        : 10;
 @zindex-select          : 900;
 @zindex-modal           : 1000;
+@zindex-drawer          : 1000;
 @zindex-message         : 1010;
 @zindex-notification    : 1010;
 @zindex-tooltip         : 1060;
--
libgit2 0.21.4