diff --git a/src/app/demo/tab/basic/demo.component.html b/src/app/demo/tab/basic/demo.component.html
index c74bf622b1..a47cbb93e3 100644
--- a/src/app/demo/tab/basic/demo.component.html
+++ b/src/app/demo/tab/basic/demo.component.html
@@ -5,7 +5,7 @@
 
 <!-- start to learn the demo from here -->
 <div class="container">
-    <jigsaw-tabs (selectChange)="testEvent($event)" [selectedIndex]="2">
+    <jigsaw-tabs (selectChange)="testEvent($event)" [selectedIndex]="2" height="200">
         <jigsaw-tab-pane [lazy]="false">
             <div jigsaw-title><span class="fa fa-gift"></span>tab 1</div>
             <ng-template>tab content 1</ng-template>
diff --git a/src/jigsaw/component/tabs/index.ts b/src/jigsaw/component/tabs/index.ts
index f5488c4ffa..b1eff1b8a8 100644
--- a/src/jigsaw/component/tabs/index.ts
+++ b/src/jigsaw/component/tabs/index.ts
@@ -8,9 +8,10 @@ import {JigsawTab} from './tab';
 import {JigsawTabPane} from "./tab-pane";
 import {CommonModule} from "@angular/common";
 import {JigsawTabContent, JigsawTabLabel} from "./tab-item";
+import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, PerfectScrollbarModule],
     exports: [JigsawTab, JigsawTabPane],
     declarations: [JigsawTab, JigsawTabPane, JigsawTabLabel, JigsawTabContent],
     providers: [],
diff --git a/src/jigsaw/component/tabs/tab.html b/src/jigsaw/component/tabs/tab.html
index 2123d2618e..267fea9c09 100644
--- a/src/jigsaw/component/tabs/tab.html
+++ b/src/jigsaw/component/tabs/tab.html
@@ -23,7 +23,8 @@
             </div>
         </div>
     </div>
-    <div class="jigsaw-tabs-content" *ngIf="_$tabPanes && _$tabPanes.length > 0">
+    <div class="jigsaw-tabs-content" [perfectScrollbar]="{wheelSpeed: 0.5, wheelPropagation: true}"
+         [style.height]="_$contentHeight">
         <jigsaw-tab-content
             *ngFor="let tab of _$tabPanes; let i = index;"
             [key]="i"
diff --git a/src/jigsaw/component/tabs/tab.scss b/src/jigsaw/component/tabs/tab.scss
index 5db0ba149a..7be1cac46f 100644
--- a/src/jigsaw/component/tabs/tab.scss
+++ b/src/jigsaw/component/tabs/tab.scss
@@ -146,6 +146,7 @@ $tab-prefix: #{$jigsaw-prefix}-tabs;
             display: block;
             flex-shrink: 0;
             width: 100%;
+            height: 100%;
             transition: transform 0.5s;
             opacity: 1;
 
diff --git a/src/jigsaw/component/tabs/tab.ts b/src/jigsaw/component/tabs/tab.ts
index bcff30ebeb..be88bae0e2 100644
--- a/src/jigsaw/component/tabs/tab.ts
+++ b/src/jigsaw/component/tabs/tab.ts
@@ -24,13 +24,15 @@ import {AbstractJigsawComponent, IDynamicInstantiatable} from "../common";
     host: {
         '[class.jigsaw-tabs-host]': 'true',
         '[style.width]': 'width',
+        '[style.height]': 'height'
     }
 })
 export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit, AfterViewChecked {
 
     constructor(private _cfr: ComponentFactoryResolver,
                 private _changeDetector: ChangeDetectorRef,
-                private _viewContainer: ViewContainerRef) {
+                private _viewContainer: ViewContainerRef,
+                private _elementRef: ElementRef) {
         super()
     }
 
@@ -214,6 +216,20 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit,
         this.remove.emit(index);
     }
 
+    /**
+     * @internal
+     */
+    public _$contentHeight: string = 'auto';
+
+    ngOnInit() {
+        if(this.height) {
+            setTimeout(() => {
+                // 等待dom渲染
+                this._$contentHeight = this._elementRef.nativeElement.offsetHeight - 46 + 'px';
+            })
+        }
+    }
+
     ngAfterViewInit() {
         if (this.selectedIndex != null) {
             this._handleSelectChange(this.selectedIndex)