固定侧边导航栏的布局方案

一、目的
整体就拆分出两个统一的文件，在不同页面引入。

二、四个关键

序号 文件 作用
1 css/common.css 公共样式（颜色变量 + 侧边栏样式 + 占位符样式）
2 js/sidebar.js 公共侧边栏加载器（定义侧边栏 HTML + 找占位符 + 塞进去）
3 每个页面的 引用 common.css 和 sidebar.js
4 每个页面的 写一个

三、第一步：写公共样式 css/common.css
这个文件里定义两件事：

  1. 全局变量（颜色、尺寸）；2. 侧边栏占位容器的样式（锁定宽度）最好是固定一个宽度，防止挤压

四、第二步：写公共 JS js/sidebar.js
这个文件做三件事：

  1. 定义侧边栏 HTML（写在字符串里）
  2. 找占位符，把侧边栏塞进去
    javascript var placeholder = document.getElementById('sidebar-placeholder'); if (placeholder) { placeholder.innerHTML = sidebarHTML; }
    这是整个方案最核心的一句代码。
    /*
    getElementById('sidebar-placeholder') → 找到页面上的空盒子

innerHTML = sidebarHTML → 把侧边栏 HTML 塞进去
*/

  1. 自动高亮当前页 + 绑定退出登录（这边默认侧边栏就是或有个登录用户的功能菜的所以就加进去）
    区分：就是css文件栏整体的布局样式规定同学也规定了特别难的样式装的js文件就是部署侧边栏里有的内容然后找到在每个页面给他留的位置把侧面栏塞进去。

五、第三步：每个页面的 引用
``html

<head> <link rel="stylesheet" href="../../css/common.css"> <!-- 公共样式 --> <script src="../../js/sidebar.js" defer></script> <!-- 侧边栏加载器 --> <script src="../../js/auth.js"></script> <!-- 登录鉴权 --> </head>`` 关键： defer 是必须的！它让 JS 等 HTML 解析完之后再执行，这样 getElementById 才能找到占位符。 路径 ../../ 表示"往上两级"，因为页面在 pages/xxx/ 里。

六、第四步：每个页面的 结构
``html





`` 关键： 上必须是 display: flex; flex-direction: row;，让侧边栏和主内容左右并排。 高度 100vh，撑满整个屏幕。 必须是 的第一个子元素。
的样式必须有 flex: 1; min-width: 0;，让它占据剩余空间。

七、整体运行流程

用户打开页面 pages/xxx/index.html
↓
浏览器读取 里的引用
↓
加载 common.css → 应用公共样式
加载 sidebar.js → 等 HTML 解析完再执行
↓
浏览器解析
↓
看到

（空盒子）
看到
（主内容区）
↓
HTML 解析完
↓
sidebar.js 开始执行
↓
getElementById('sidebar-placeholder') → 找到空盒子
↓
placeholder.innerHTML = sidebarHTML → 塞入侧边栏
↓
侧边栏出现在页面上（宽度 240px，在左侧）
主内容出现在右侧（自动填充剩余空间）

八、这样做的 4 个好处
好处 说明
统一 所有页面侧边栏完全一致
好维护 改侧边栏只需改 sidebar.js 一个文件，全站同步
好扩展 加新页面，只要引用 common.css 和 sidebar.js，写个

posted @ 2026-09-16 22:48  fairy耶猫  阅读(1)  评论(0)    收藏  举报