diff --git a/packages/ui/src/BasicLayout/style/index.ts b/packages/ui/src/BasicLayout/style/index.ts
index 4babdde0b..9b376aeeb 100644
--- a/packages/ui/src/BasicLayout/style/index.ts
+++ b/packages/ui/src/BasicLayout/style/index.ts
@@ -16,9 +16,9 @@ export const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken> = (
         // 48px is the height of BasicLayout header
         minHeight: 'calc(100vh - 48px)',
       },
-    },
-    [`${proComponentsCls}-footer-bar`]: {
-      width: `calc(100% - 192px - 24px)`,
+      [`${proComponentsCls}-footer-bar`]: {
+        width: `calc(100% - 192px - 24px)`,
+      },
     },
   };
 };
diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx
index 553dc15b1..2f5aa6576 100644
--- a/packages/ui/src/PageContainer/index.tsx
+++ b/packages/ui/src/PageContainer/index.tsx
@@ -37,6 +37,7 @@ const PageContainer = ({
   extraContent,
   tabList,
   tabBarExtraContent,
+  footerToolBarProps,
   locale,
   ...restProps
 }: PageContainerProps) => {
@@ -80,7 +81,7 @@ const PageContainer = ({
     },
   };
   const noHasHeader =
-    ['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon', 'breadcrumb'].every(
+    ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every(
       item => !newHeader?.[item]
     ) &&
     !content &&
@@ -104,6 +105,11 @@ const PageContainer = ({
       extraContent={extraContent}
       tabList={tabList}
       tabBarExtraContent={tabBarExtraContent}
+      footerToolBarProps={{
+        ...footerToolBarProps,
+        // render footer as same level with PageContainer instead of under body
+        portalDom: false,
+      }}
       {...restProps}
     />
   );