Quellcode durchsuchen

修复页面布局产生空白的bug

Shinohara Haruna vor 6 Monaten
Ursprung
Commit
3d2b649d23
1 geänderte Dateien mit 14 neuen und 5 gelöschten Zeilen
  1. 14 5
      smsb-plus-ui/src/assets/styles/index.scss

+ 14 - 5
smsb-plus-ui/src/assets/styles/index.scss

@@ -4,19 +4,28 @@
 html, body, #app {
   height: 100%;
   min-height: 100%;
+  overflow: hidden;
 }
 
-// 主体容器撑满高度
+// 主体容器只用 flex: 1 填充,不要再设置 min-height: 100%
 .layout-body, .main-container, .app-main, .p-2 {
   flex: 1 1 0;
-  min-height: 0;
+  min-height: 0 !important;
+  height: auto !important;
   display: flex;
   flex-direction: column;
+  overflow: auto;
 }
 
+// 只让 #app 或 .app-wrapper 撑满视口
+#app, .app-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+// .main-container 不再设置 height/min-height
 .main-container {
-  height: 100%;
-  min-height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -34,7 +43,7 @@ html, body, #app {
 .el-card.is-never-shadow {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 90%;
 }
 
 .el-card.is-never-shadow .el-card__body {