生产管理系统前端 - 页面主区域滚动条fix

crop-x/src/components/layouts/SideBar/SideBarOld.tsx

@@ -222,7 +222,7 @@ export function SideBarOld({
   return (
     <div className={cn(
       "flex h-full bg-background",
-      "min-h-screen"
+      "min-h-0"  // 确保父容器有正确的高度约束
     )}>
       {/* 左侧导航栏 - 独立滚动 */}
       {!isMobile && (

crop-x/src/components/layouts/SideBar/components/MainContent.tsx

@@ -62,8 +62,8 @@ export function MainContent({
   }
 
   return (
-    <div className="flex-1 flex flex-col bg-background">
-      <div className="p-6">
+    <div className="flex-1 flex flex-col bg-background h-full">
+      <div className="flex-1 p-6 min-h-0 content-container">
         {children}
       </div>
     </div>

crop-x/src/styles/body.css

@@ -23,9 +23,19 @@
 
 .contentScroll{
     height: 100%;
+    min-height: 0;
     overflow-y: auto;
 }
 
+/* 内容容器底部间距 */
+.content-container::after {
+    content: '';
+    display: block;
+    height: 2rem; /* 5rem 底部间距 */
+    width: 100%;
+    flex-shrink: 0;
+}
+
 /* 滚动条颜色变量 */
 :root {
   --scrollbar-color: #d1d5db;