本文介绍一种基于 css grid 的简洁方案，实现浏览器视口内三栏布局（左侧工具栏、中间主内容区、右侧侧边栏）加底部固定页脚，并让中间面板独立纵向滚动，同时保持页脚始终可见。
本文介绍一种基于 css grid 的简洁方案，实现浏览器视口内三栏布局（左侧工具栏、中间主内容区、右侧侧边栏）加底部固定页脚，并让中间面板独立纵向滚动，同时保持页脚始终可见。
在响应式与现代化布局实践中，当需要构建「全屏固定高度 + 多区域独立滚动」的界面（如 IDE 风格控制台、数据看板或管理后台），传统 Flexbox 嵌套易导致 overflow 行为不可控、高度计算复杂、父子容器溢出冲突等问题。此时，CSS Grid 是更直接、语义更清晰、维护性更高的解决方案。
✅ 核心思路：用 Grid 划分二维空间，精准控制行列与滚动区域
我们不再依赖多层 flex-direction: column 堆叠和 height: 100% 传递，而是用 grid-template-rows 和 grid-template-columns 显式定义整体结构：
-
grid-template-rows: 1fr auto→ 主内容区占满剩余高度，页脚固定高度； -
grid-template-columns: 1fr 3fr 2fr→ 左（工具栏）、中（可滚动主区）、右（侧边栏）按比例分配宽度； - 关键技巧：仅对需滚动的
<div> 设置 <code>overflow: auto，并确保其父容器（Grid Item）具备明确高度约束（由1fr自动提供）；- 工具栏跨两行：
grid-row: 1 / span 2，使其贯穿主内容与页脚区域；- 页脚横跨中、右两列：
grid-column: 2 / span 2。? 完整可运行代码示例
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scroll Middle Flex Panel — Grid Solution</title><style> html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { display: grid; grid-template-columns: 1fr 3fr 2fr; /* 左:工具栏 | 中:主内容 | 右:侧边栏 */ grid-template-rows: 1fr auto; /* 主区自适应 | 页脚固定 */ gap: 4px; padding: 4px; box-sizing: border-box; } /* 所有直接子元素统一基础样式 */ body > div, footer { background: #f5f5f5; padding: 8px; border-radius: 4px; overflow: hidden; /* 防止内容溢出破坏网格边界 */ } /* 工具栏：跨主内容区与页脚两行 */ body > div:first-child { grid-row: 1 / span 2; background: #2c3e50; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* 主内容区 & 侧边栏：均启用垂直滚动 */ body > div:not(:first-child) { overflow-y: auto; overflow-x: hidden; background: #ffffff; border: 1px solid #e0e0e0; } /* 页脚：横跨中间与右侧两列 */ footer { grid-column: 2 / span 2; background: #34495e; color: white; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 4px; } /* 内容段落增强可读性 */ p { margin: 12px 0; line-height: 1.6; color: #333; } h2, h3, h4 { margin: 8px 0 12px; color: #2c3e50; } </style><!-- 左侧工具栏 --><div> <h2>?️ Toolbar</h2> <p>Fixed-height sidebar.<br>Stays visible at all times.</p> </div> <!-- 中间主内容区（独立滚动） --> <div> <h2>? Scroll This Panel</h2> <p>Lorem ipsum dolor sit amet... (长文本略，实际使用时可替换为动态内容)</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <!-- 此处可插入任意长度内容，超出部分将自动出现垂直滚动条 --> </div> <!-- 右侧侧边栏（也可滚动） --> <div> <h4>? Side Data</h4> <p>This panel also scrolls independently.<br>You can enable/disable per column as needed.</p> </div> <!-- 底部固定页脚 --> <footer><h3>✅ Footer — Always Visible</h3> </footer>⚠️ 注意事项与最佳实践
-
避免
height: 100vh在移动端的兼容问题：100vh在 Safari iOS 等浏览器中可能因地址栏显示/隐藏而跳变，推荐统一使用html, body { height: 100% }+ Grid 布局，更稳定； -
滚动行为必须作用于 Grid Item，而非其子元素：若在
.data-container上设overflow-y: auto，但其父级（Grid Item）未被赋予高度约束，则滚动无效；应确保body > div:nth-child(2)这类直接 Grid Item 具备overflow: auto； -
慎用
flex: 1与grid: 1fr混用：本方案完全放弃 Flex 嵌套，避免flex-grow与grid-row: 1fr冲突导致高度塌陷； -
无障碍与语义化建议：为可滚动区域添加
aria-label（如aria-label="Main content area, scrollable"），并确保键盘用户可通过Tab进入后用方向键/空格/PageUp/PageDown滚动； -
响应式延展：如需适配小屏幕，可用
@media (max-width: 768px)将grid-template-columns改为1fr，使工具栏置顶、内容区堆叠，保持逻辑一致。
✅ 总结
相比层层嵌套的 Flexbox 方案，CSS Grid 以声明式二维布局能力，天然支持「区域跨越」「比例分配」「独立溢出控制」三大关键需求。只需 10 行核心 CSS（
display: grid,grid-template-*,overflow: auto），即可稳健实现「工具栏固定、中间内容独立滚动、页脚锚定底部」的专业级布局——简洁、高效、可维护，是现代 Web 界面布局的首选范式。 - 工具栏跨两行：
