diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less
index 8dd0a9a202..2bfadceb0d 100644
--- a/components/date-picker/style/DecadePanel.less
+++ b/components/date-picker/style/DecadePanel.less
@@ -1,13 +1,13 @@
 .@{calendar-prefix-cls}-decade-panel {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background: @component-background;
-  z-index: 10;
   position: absolute;
-  outline: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  background: @component-background;
   border-radius: @border-radius-base;
+  outline: none;
 }
 
 .@{calendar-prefix-cls}-decade-panel-hidden {
@@ -18,10 +18,14 @@
   .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel");
 }
 
+.@{calendar-prefix-cls}-decade-panel-body {
+  height: ~"calc(100% - 34px)";
+}
+
 .@{calendar-prefix-cls}-decade-panel-table {
   table-layout: fixed;
   width: 100%;
-  height: 248px;
+  height: 100%;
   border-collapse: separate;
 }
 
diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less
index fda1323560..8e5cac95cc 100644
--- a/components/date-picker/style/MonthPanel.less
+++ b/components/date-picker/style/MonthPanel.less
@@ -1,13 +1,17 @@
 .@{calendar-prefix-cls}-month-panel {
-  left: 0;
-  top: 1px;
-  bottom: 0;
-  right: 0;
-  background: @component-background;
-  z-index: 10;
   position: absolute;
-  outline: none;
+  top: 1px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
   border-radius: @border-radius-base;
+  background: @component-background;
+  outline: none;
+
+  > div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+    height: 100%;
+  }
 }
 
 .@{calendar-prefix-cls}-month-panel-hidden {
@@ -18,10 +22,14 @@
   .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel");
 }
 
+.@{calendar-prefix-cls}-month-panel-body {
+  height: ~"calc(100% - 34px)";
+}
+
 .@{calendar-prefix-cls}-month-panel-table {
   table-layout: fixed;
   width: 100%;
-  height: 248px;
+  height: 100%;
   border-collapse: separate;
 }
 
diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less
index 68ea94a32a..9ba4563e6c 100644
--- a/components/date-picker/style/YearPanel.less
+++ b/components/date-picker/style/YearPanel.less
@@ -1,13 +1,17 @@
 .@{calendar-prefix-cls}-year-panel {
-  left: 0;
-  top: 1px;
-  bottom: 0;
-  right: 0;
-  background: @component-background;
-  z-index: 10;
   position: absolute;
-  outline: none;
+  top: 1px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
   border-radius: @border-radius-base;
+  background: @component-background;
+  outline: none;
+
+  > div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+    height: 100%;
+  }
 }
 
 .@{calendar-prefix-cls}-year-panel-hidden {
@@ -18,10 +22,14 @@
   .calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel");
 }
 
+.@{calendar-prefix-cls}-year-panel-body {
+  height: ~"calc(100% - 34px)";
+}
+
 .@{calendar-prefix-cls}-year-panel-table {
   table-layout: fixed;
   width: 100%;
-  height: 248px;
+  height: 100%;
   border-collapse: separate;
 }