diff --git a/build/template/pre-loading.css b/build/template/pre-loading.css
index 68003e51d..fa334aed5 100644
--- a/build/template/pre-loading.css
+++ b/build/template/pre-loading.css
@@ -15,8 +15,8 @@ html, body {
   overflow-y: auto;
   /* 不显示横向滚动条, 至少不在html, body层显示横向滚动条 */
   overflow-x: hidden;
-  height: auto !important;
-  min-height: 100vh !important;
+  height: 100% !important;
+  min-height: 100% !important;
 }
 
 body {
@@ -27,13 +27,9 @@ body {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  min-width: 100vw;
-  min-height: 100vh;
 }
 
 #app {
-  min-width: 100vw;
-  min-height: 100vh;
   display: flex;
 }
 
diff --git a/src/portal/routes/rtc/MainScreen.tsx b/src/portal/routes/rtc/MainScreen.tsx
index 56499cc61..a0b29852e 100644
--- a/src/portal/routes/rtc/MainScreen.tsx
+++ b/src/portal/routes/rtc/MainScreen.tsx
@@ -17,6 +17,7 @@ const Container = styled.div`
 const MainContent = styled.div`
   flex: 1;
   position: relative;
+  height: 100%;
 `;
 
 const MainPeerContainer = styled.div`
diff --git a/src/web/components/panels/CommonPanel.tsx b/src/web/components/panels/CommonPanel.tsx
index 41369251a..97e11d7b3 100644
--- a/src/web/components/panels/CommonPanel.tsx
+++ b/src/web/components/panels/CommonPanel.tsx
@@ -16,7 +16,7 @@ const Root = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-height: 100vh;
+  max-height: 100%;
   overflow: hidden;
 `;
 
diff --git a/src/web/routes/App.less b/src/web/routes/App.less
index b6bc1ab4e..0c114190a 100644
--- a/src/web/routes/App.less
+++ b/src/web/routes/App.less
@@ -1,10 +1,11 @@
 * {
   box-sizing: border-box;
-  font-family: PingFang SC, "Microsoft YaHei", arial, serif;
+  font-family: PingFang SC, 'Microsoft YaHei', arial, serif;
   transition: opacity 0.1s ease-in-out;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   min-height: 100%;
@@ -13,16 +14,21 @@ html, body {
   overflow: hidden;
 }
 
-
 .app {
-  ul, li, p {
+  ul,
+  li,
+  p {
     margin: 0;
     padding: 0;
     list-style: none;
   }
 
   a {
-    &,&:link,&:visited,&:hover,&:active {
+    &,
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
       text-decoration: none;
       color: #2596e5;
       font-size: 14px;
@@ -33,7 +39,7 @@ html, body {
     margin: 0;
     white-space: pre-wrap;
     word-wrap: break-word;
-    font-family: PingFang SC, "Microsoft YaHei", arial, serif;
+    font-family: PingFang SC, 'Microsoft YaHei', arial, serif;
   }
 
   img {
@@ -42,17 +48,19 @@ html, body {
   }
 }
 
-
 #app {
   .app {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
-    min-width: 100%;
-    height: 100vh;
-    background-color: rgba(255,255,255,0.2);
+    background-color: rgba(255, 255, 255, 0.2);
     transition: initial;
   }
 }
diff --git a/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx b/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx
index 0db3bf063..5967b3711 100644
--- a/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx
+++ b/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx
@@ -9,7 +9,7 @@ import { GroupMembersAction } from '@web/components/panels/actions/GroupMembersA
 const Root = styled.div`
   display: flex;
   flex-direction: row;
-  flex: 1;
+  height: 100%;
 `;
 
 interface GroupChatPanelProps {
@@ -17,7 +17,6 @@ interface GroupChatPanelProps {
 }
 export const GroupChatPanel: React.FC<GroupChatPanelProps> = TMemo((props) => {
   const { groupUUID } = props;
-  const [showMembers, setShowMembers] = useState(false);
   const groupInfo = useJoinedGroupInfo(groupUUID);
 
   if (_isNil(groupInfo)) {
diff --git a/src/web/routes/Main/Content/Personal/UserConversePanel.tsx b/src/web/routes/Main/Content/Personal/UserConversePanel.tsx
index 427a88b37..62defeb3b 100644
--- a/src/web/routes/Main/Content/Personal/UserConversePanel.tsx
+++ b/src/web/routes/Main/Content/Personal/UserConversePanel.tsx
@@ -6,8 +6,8 @@ import styled from 'styled-components';
 
 const Root = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
+  height: 100%;
 `;
 
 interface UserConversePanelParams {
diff --git a/src/web/routes/Main/index.tsx b/src/web/routes/Main/index.tsx
index 14569160e..ff700c312 100644
--- a/src/web/routes/Main/index.tsx
+++ b/src/web/routes/Main/index.tsx
@@ -8,9 +8,11 @@ import { SidebarContextProvider } from './SidebarContext';
 const Root = styled.div.attrs({
   'data-testid': 'main-page-root',
 })`
-  width: 100vw;
-  height: 100vh;
-  position: relative;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 `;
 
 const BaseContent = styled.div`