解决出现滚动条问题

src/components/Breadcrumb/index.vue

@@ -59,7 +59,7 @@ export default {
   .app-breadcrumb.el-breadcrumb {
     display: inline-block;
     font-size: 14px;
-    line-height: 50px;
+    line-height: 50px; /* 保持行高与容器高度一致 */
     margin-left: 10px;
     .no-redirect {
       color: #97a8be;

src/styles/sidebar.scss

@@ -2,7 +2,7 @@
 
   // 主体区域 Main container
   .main-container {
-    min-height: 100%;
+    // min-height: 100%;
     margin: 0 auto;
     padding: 0 36px;
     transition: margin-left .28s;

src/views/layout/Layout.vue

@@ -62,13 +62,15 @@
         </div>
       </el-menu>
     </div>
-    <!-- 面包屑导航 -->
-    <div class="breadcrumb-container">
+    <div class="content-wrapper">
+      <!-- 面包屑导航 -->
+      <div class="breadcrumb-container">
         <breadcrumb />
       </div>
-    <div class="main-container">
-      <!-- <navbar/> -->
-      <app-main/>
+      <div class="main-container">
+        <!-- <navbar/> -->
+        <app-main/>
+      </div>
     </div>
   </div>
 </template>
@@ -134,7 +136,7 @@ export default {
   .app-wrapper {
     @include clearfix;
     position: relative;
-    height: 100%;
+    height: 100vh; /* 使用视口高度而不是百分比 */
     width: 100%;
     &.mobile.openSidebar{
       position: fixed;
@@ -151,15 +153,38 @@ export default {
     z-index: 999;
   }
   .horizontal-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
     box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+    background-color: #545c64;
+    height: 60px; /* 明确指定高度 */
   }
   
   .breadcrumb-container {
     padding: 0px 20px;
+    margin-bottom: 5px;
     background-color: #fff;
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    height: 50px; /* 明确指定面包屑容器高度 */
   }
 
+  .content-wrapper {
+    position: absolute;
+    top: 60px; /* 菜单栏高度 */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  
+  .main-container {
+    min-height: calc(100% - 55px); /* 减去面包屑高度 */
+  }
+  
   .el-menu--horizontal {
     display: flex;
     justify-content: center;

src/views/layout/components/AppMain.vue

@@ -21,9 +21,8 @@ export default {
 
 <style scoped>
 .app-main {
-  /*50 = navbar  */
-  min-height: calc(100vh - 50px);
   position: relative;
-  overflow: hidden;
+  height: 100%;
+  overflow: auto; /* 允许内容滚动 */
 }
 </style>