diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts
index d0c78166a2..ec702977ba 100644
--- a/packages/frontend/core/src/components/page-detail-editor.css.ts
+++ b/packages/frontend/core/src/components/page-detail-editor.css.ts
@@ -10,6 +10,9 @@ export const editor = style({
         '--affine-editor-side-padding': '15px',
       },
     },
+    '&.is-public-page': {
+      height: '100%',
+    },
   },
 });
 
diff --git a/packages/frontend/core/src/components/pure/header/index.tsx b/packages/frontend/core/src/components/pure/header/index.tsx
index 69a91f66af..4856a33975 100644
--- a/packages/frontend/core/src/components/pure/header/index.tsx
+++ b/packages/frontend/core/src/components/pure/header/index.tsx
@@ -16,12 +16,19 @@ interface HeaderPros {
   right?: ReactNode;
   center?: ReactNode;
   bottomBorder?: boolean;
+  isFloat?: boolean;
 }
 
 // The Header component is used to solve the following problems
 // 1. Manage layout issues independently of page or business logic
 // 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
-export const Header = ({ left, center, right, bottomBorder }: HeaderPros) => {
+export const Header = ({
+  left,
+  center,
+  right,
+  bottomBorder,
+  isFloat,
+}: HeaderPros) => {
   const sidebarSwitchRef = useRef<HTMLDivElement | null>(null);
   const leftSlotRef = useRef<HTMLDivElement | null>(null);
   const centerSlotRef = useRef<HTMLDivElement | null>(null);
@@ -45,7 +52,9 @@ export const Header = ({ left, center, right, bottomBorder }: HeaderPros) => {
   const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
   return (
     <div
-      className={clsx(style.header, bottomBorder && style.bottomBorder)}
+      className={clsx(style.header, bottomBorder && style.bottomBorder, {
+        [style.headerFloat]: isFloat,
+      })}
       data-open={open}
       data-sidebar-floating={appSidebarFloating}
       data-testid="header"
diff --git a/packages/frontend/core/src/components/pure/header/style.css.tsx b/packages/frontend/core/src/components/pure/header/style.css.tsx
index 90ed34dced..faea9cac52 100644
--- a/packages/frontend/core/src/components/pure/header/style.css.tsx
+++ b/packages/frontend/core/src/components/pure/header/style.css.tsx
@@ -24,6 +24,11 @@ export const header = style({
   },
 } as ComplexStyleRule);
 
+export const headerFloat = style({
+  position: 'absolute',
+  width: '100%',
+});
+
 export const bottomBorder = style({
   borderBottom: '1px solid var(--affine-border-color)',
 });
diff --git a/packages/frontend/core/src/pages/share/share-header.tsx b/packages/frontend/core/src/pages/share/share-header.tsx
index bbcf38f4be..54e4eb956f 100644
--- a/packages/frontend/core/src/pages/share/share-header.tsx
+++ b/packages/frontend/core/src/pages/share/share-header.tsx
@@ -20,6 +20,7 @@ export function ShareHeader({
 
   return (
     <Header
+      isFloat={publishMode === 'edgeless'}
       left={<ShareHeaderLeftItem />}
       center={
         <BlockSuiteHeaderTitle