diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index 081bd8e0b..70ebda287 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -118,7 +118,7 @@ exports[`renders ./components/layout/demo/fixed.vue correctly 1`] = `
 
 exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
 <section class="ant-layout ant-layout-has-sider">
-  <aside style="overflow: auto; height: 100vh; position: fixed; left: 0px; max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;" class="ant-layout-sider ant-layout-sider-dark">
+  <aside style="overflow: auto; height: 100vh; position: fixed; left: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
@@ -171,7 +171,7 @@ exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
     <!---->
   </aside>
   <section class="ant-layout" style="margin-left: 200px;">
-    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
     <main class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
       <div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;"> ... <br> Really <br> ... <br> ... <br> ... <br> long <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> content </div>
     </main>
diff --git a/components/layout/demo/fixed-sider.vue b/components/layout/demo/fixed-sider.vue
index 185af5d9d..733585e6d 100644
--- a/components/layout/demo/fixed-sider.vue
+++ b/components/layout/demo/fixed-sider.vue
@@ -17,7 +17,7 @@ When dealing with long content, a fixed sider can provide a better user experien
 
 </docs>
 <template>
-  <a-layout>
+  <a-layout has-sider>
     <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
       <div class="logo" />
       <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 9cc8664fd..b84c2e144 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -80,8 +80,6 @@ The wrapper.
 | style | to customize the styles | object\|string | - |
 | hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
 
-> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
-
 ### Layout.Sider
 
 The sidebar.
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index ddde23ef0..46a7d2657 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -81,8 +81,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
 | style    | 指定样式                                                           | object  | -      |
 | hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | -      |
 
-> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
-
 ### Layout.Sider
 
 侧边栏。
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
index 86a912e70..f699c0b45 100644
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -8,6 +8,7 @@
   display: flex;
   flex: auto;
   flex-direction: column;
+
   /* fix firefox can't set height smaller than content on flex item */
   min-height: 0;
   background: @layout-body-background;
@@ -48,6 +49,7 @@
 
   &-content {
     flex: auto;
+
     /* fix firefox can't set height smaller than content on flex item */
     min-height: 0;
   }
diff --git a/components/layout/style/index.ts b/components/layout/style/index.tsx
similarity index 100%
rename from components/layout/style/index.ts
rename to components/layout/style/index.tsx