侧边栏应作为与同级的兄弟元素置于内，推荐用语义化标签并包裹于.layout容器中；CSS采用Flex或Grid布局实现固定宽+自适应主内容。
侧边栏该放在
侧边栏不是装饰性元素，HTML5 明确推荐用 <aside></aside> 标签表示与主内容相关但可独立存在的部分。它不该塞进 <header></header> 或 <footer></footer> 里，也不该用 <div class="sidebar"> 模糊处理。
<p>正确结构是让 <code><aside></aside> 和 <main></main> 成为同级兄弟元素，都直接子级于 或一个包裹用的 <div class="layout">：
<pre class="brush:php;toolbar:false;"><body>
<header>...</header>
<div class="layout">
<aside><nav>...</nav></aside>
<main>...</main>
</div>
<footer>...</footer>
</body></pre>
<h3>用 CSS 实现侧边栏固定宽度 + 主内容自适应的最小方案</h3>
<p>别一上来就套框架或写一堆媒体查询。最简可行方案是 Flex 布局，兼容到 IE11（需加 <code>-ms- 前缀），且无需 JS 干预。
.layout { display: flex; }-
aside { width: 240px; flex-shrink: 0; }（flex-shrink: 0防止被压缩） -
main { flex: 1; min-width: 0; }（min-width: 0解决内部文本溢出不换行的问题）
如果用 Grid，更简洁：.layout { display: grid; grid-template-columns: 240px 1fr; }，但注意 Safari 旧版本对 1fr 的解析有差异。
立即学习“前端免费学习笔记（深入）”；
侧边栏导航链接点击后页面跳转但高亮失效？检查这三点
常见现象：点进 /about.html 后，侧边栏里“关于”没高亮。这不是 JS 问题，而是 HTML 结构或路径没对齐。
- 确保所有页面共享同一份侧边栏 HTML 片段（用
include、服务端渲染或 JS 动态加载，别手动复制） - 高亮逻辑依赖当前 URL 路径，用
window.location.pathname匹配<a href="/about"></a>，注意结尾斜杠是否一致（/about≠/about/） - 如果用相对路径如
href="about.html"，在子目录页（如/blog/post.html）下会变成/blog/about.html，导致匹配失败——统一用根路径href="/about"
移动端要不要隐藏侧边栏？别只靠 display: none
直接在小屏上 display: none 侧边栏，看似省事，但会带来两个隐性问题：
- 屏幕阅读器仍可能读取（即使不可见），影响无障碍体验；应配合
aria-hidden="true"和tabindex="-1" - 如果侧边栏含重要导航，隐藏后用户无法访问——更合理的方式是抽离成汉堡菜单，用
<details><summary></summary></details>或轻量 JS 控制显隐 - CSS 中优先用
max-width媒体查询而非max-height，避免因滚动容器高度变化导致误判
复杂点在于：侧边栏是否承载状态（比如折叠/展开记忆）、是否需要服务端首屏直出、以及是否和主内容存在焦点流顺序依赖——这些细节不处理，光加个 <aside></aside> 标签只是形似。
