上下分栏// 父容器 - 弹性布局 .parent-container { display: flex; flex-direction: column; // 垂直排列 height: 100%; // 或固定高度 // 自适应区域会占据剩余空间 .auto-area { flex: 1; min-height: 0; // 关键允许收缩 overflow: auto; // 内容过多时滚动 } // 固定/可控区域 .fixed-area { flex-shrink: 0; // 不收缩 max-height: 50%; // 限制最大高度 overflow: auto; } }左中右三栏.container { display: flex; flex-direction: row; // 水平排列 .left-sidebar { width: 200px; // 固定宽度 flex-shrink: 0; } .main-content { flex: 1; // 中间自适应 min-width: 0; } .right-sidebar { width: 250px; flex-shrink: 0; } }头部固定内容滚动.container { display: flex; flex-direction: column; .header { height: 60px; flex-shrink: 0; // 头部固定 } .content { flex: 1; overflow: auto; // 内容区域滚动 } }
