optimize: flexed height by table

PP-binding/frontend/web/style/index.css

@@ -9,12 +9,16 @@
 }
 
 body {
-    padding: 10px 40px 10px 40px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding: 0 40px 0 40px;
     background-color: rgba(236, 236, 236, 0.39);
 }
 
 .title-container {
     width: 100%;
+    margin-top: 10px;
     display: flex;
     justify-content: center;
 }
@@ -23,6 +27,14 @@ body {
     letter-spacing: 5px;
 }
 
+.main-container {
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
 .tools-container {
     display: flex;
     justify-content: space-between;
@@ -74,6 +86,13 @@ body {
     color: blue;
 }
 
+.table-container {
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 .table-header {
     height: 50px;
     display: flex;
@@ -91,7 +110,9 @@ body {
 }
 
 .table-outer-scrollable-container {
-    height: 700px;
+    min-height: 0;
+    flex: 1;
+    /*height: 700px;*/
     overflow-y: scroll;
     scrollbar-color: var(--color-green) rgba(236, 236, 236, 0.89);
 }