最稳妥方案是用flex-direction: column的外层容器包裹header和.content，.content再设display: flex、flex: 1并含aside与main；aside设min-width: 240px、flex: 0 0 auto，main设flex: 1；移动端用transform: translateX(-100%)隐藏侧边栏而非display: none。
顶部通栏导航 + 侧边栏的 CSS 布局结构怎么写
用 display: flex 最稳妥，不用浮动或绝对定位硬凑。关键在于把页面拆成三块：顶部 header、左侧 aside、主内容 main，并让后两者在下方形成横向并列。
常见错误是给 aside 加 float: left 后，main 不设宽度就塌陷；或者用 position: absolute 导致响应式失效。
-
header设固定高度（如height: 60px）并加flex-shrink: 0 - 外层容器设
display: flex; flex-direction: column; height: 100vh -
main和aside的父容器再套一层flex，方向为row，并设flex: 1 - 侧边栏宽度建议用
min-width: 240px而非固定width，避免小屏被撑出横向滚动条
如何让侧边栏高度撑满剩余区域
单纯设 height: 100% 没用——父元素没明确高度时，百分比高度不生效。必须靠 Flex 布局“推”出来。
典型结构：
立即学习“前端免费学习笔记（深入）”；
<div class="layout">
<header>导航</header>
<div class="content">
<aside>菜单</aside>
<main>正文</main>
</div>
</div>
对应 CSS 中，.content 需设 flex: 1; display: flex，aside 和 main 再各自设 flex: 0 0 auto（侧边栏）和 flex: 1（主内容），这样高度才能随容器自适应。
移动端要不要隐藏侧边栏？怎么切
别一上来就写 @media (max-width: 768px) 然后 display: none —— 这会让语义结构丢失，对屏幕阅读器不友好，也影响 SEO。
更合理的做法是保留 DOM 结构，用 visibility: hidden + position: absolute 把它移出视口，同时加一个汉堡按钮控制显隐：
- 侧边栏加 class
sidebar-collapsed，CSS 中设transform: translateX(-100%) - 切换时只改这个 class，不删节点
- 主内容区域在折叠状态下加
margin-left: 0，展开时加margin-left: 240px（与侧边栏宽度一致） - 注意：用
transform比left: -100%更利于 GPU 加速
为什么不能直接用 CSS Grid 一步到位
Grid 确实能一行代码定义区域：grid-template-areas: "header header" "sidebar main"，但实际项目中容易踩两个坑：
- IE11 完全不支持，如果还要兼容就得 fallback 到 Flex，反而增加维护成本
- 当侧边栏需要动态收起/展开时，Grid 的
grid-template-columns得 JS 重算，不如 Flex 的flex属性响应自然 - 某些 CMS 或框架生成的 HTML 结构嵌套较深，Grid 的
area映射容易错位，调试成本高
除非项目明确只需现代浏览器且布局极其固定，否则优先选 Flex。
