diff --git a/.stylelintrc.json b/.stylelintrc.json
index e827d7d0..6b966ac3 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -14,7 +14,7 @@
     "property-no-unknown": [
       true,
       {
-        "ignoreProperties": ["/Color$/"]
+        "ignoreProperties": ["/Color$/", "/Height$/"]
       }
     ]
   }
diff --git a/src/components/Layout/GlobalHeader/index.less b/src/components/Layout/GlobalHeader/index.less
index 4f32c390..f14d660f 100644
--- a/src/components/Layout/GlobalHeader/index.less
+++ b/src/components/Layout/GlobalHeader/index.less
@@ -98,7 +98,7 @@
     .ant-btn-link {
       position: absolute;
       min-width: 280px;
-      min-height: 40px;
+      min-height: @header-height;
     }
   }
 }
diff --git a/src/components/Layout/GlobalNav/index.jsx b/src/components/Layout/GlobalNav/index.jsx
index ff387057..f5eacdc8 100644
--- a/src/components/Layout/GlobalNav/index.jsx
+++ b/src/components/Layout/GlobalNav/index.jsx
@@ -60,8 +60,8 @@ export class GlobalNav extends React.Component {
     const { navItems = [] } = this.props;
 
     const drawerStyle = {
-      top: '40px',
-      height: 'calc(100% - 40px)',
+      top: globalCSS.headerHeight,
+      height: `calc(100% - ${globalCSS.headerHeight})`,
     };
 
     return (
diff --git a/src/components/Layout/GlobalNav/index.less b/src/components/Layout/GlobalNav/index.less
index 9b3b6921..438d8241 100644
--- a/src/components/Layout/GlobalNav/index.less
+++ b/src/components/Layout/GlobalNav/index.less
@@ -3,7 +3,7 @@
 .global-nav-icon {
   position: relative;
   float: left;
-  width: @header-height;
+  width: @sider-collapsed-width;
   height: @header-height;
   color: #fff;
   font-size: 16px;
diff --git a/src/layouts/Base/index.less b/src/layouts/Base/index.less
index 872f3ce9..6590781c 100644
--- a/src/layouts/Base/index.less
+++ b/src/layouts/Base/index.less
@@ -19,7 +19,7 @@
 .header-collapsed {
   &:extend(.header);
 
-  padding-left: 40px;
+  padding-left: @sider-collapsed-width;
 }
 
 .logo {
@@ -258,7 +258,7 @@
 }
 
 .base-layout-sider-collapsed {
-  width: 40px;
+  width: @sider-collapsed-width;
   transition: all 0.2s;
 
   .menu-collapsed {
@@ -274,14 +274,14 @@
 
 .base-layout-right {
   position: absolute;
-  top: 40px;
+  top: @header-height;
   right: 0;
   left: 230px;
-  height: calc(100vh - 40px);
+  height: calc(100vh - @header-height);
 }
 
 .base-layout-right-collapsed {
-  left: 40px;
+  left: @sider-collapsed-width;
 }
 
 .base-layout-sider-hover {
diff --git a/src/styles/variables.less b/src/styles/variables.less
index 7ab6a1c3..1ea4969b 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -128,6 +128,7 @@
 /*  sider */
 @sider-background: #26262b;
 @sider-open-background: #222121;
+@sider-collapsed-width: 40px;
 
 /* login */
 @login-error: #a43a39;
@@ -144,4 +145,5 @@
   dangerColor: @danger-color;
   moneyColor: @money-color;
   infoColor: @info-color;
+  headerHeight: @header-height;
 }