案例：让全站页面真正对齐

本站调整中，曾先解决“点击笔记和工具时 Header 改变”，随后又收到反馈：Header 虽然统一了，却与页面正文对不齐；首页 Footer 也和其他页面不一致。

这些是真实反馈。下面结合当前仓库说明原因和验证方法；简化代码会标注，测量脚本是可复查的工具，不把未保存的历史数据伪装成实验报告。

先把三个问题分开

用户看到的问题	实际要检查的关系
点击导航后 Header 改变	Header 在不同路由间是否一致
Header 与正文不对齐	同一页面的公共组件与正文是否共享边界
首页 Footer 位置异常	水平容器是否一致；短页面的垂直布局是否一致

只比较三个 Header，会漏掉第二行；只修改 Footer 的宽度，也解决不了第三行的高度问题。最初的验收范围比用户实际期待窄，这是返工的重要原因。

从当前代码找到共同入口

本站可以从这些文件核对：

src/components/header.tsx：Header 内层使用 site-frame。
src/components/footer.tsx：Footer 内层也使用 site-frame。
src/app/knowledge/page.tsx、src/app/tools/page.tsx：页面外层使用 page-shell。
src/app/page.tsx：首页使用 home-intro。
src/app/globals.css：以上类名共享同一条水平规则。

先确认这些消费者，比给截图中的 Header 加一个偏移量更能解释整个问题。浏览器中的左右偏移只是现象，不是一定该用 margin 修正的证据。

修复规则，而不是逐页补偏移

当前共享规则的关键部分如下，省略了其他无关样式：

:root {
  --page-max-width: 75rem;
}
 
.site-frame,
.page-shell,
.page-shell-wide,
.home-intro {
  width: min(calc(100% - var(--page-gutter) * 2), var(--page-max-width));
  margin-inline: auto;
}

选择 75rem 是本站当时的排版取舍，不是所有网站都该使用的“最佳宽度”。真正需要复用的是一处定义、多处消费。

文章正文内部仍可有适合阅读的列宽。外容器对齐，不等于每个文字段落、卡片和侧栏都必须占满容器。

当前根布局使用纵向 flex，主内容占据剩余空间。以下是 layout.tsx 的结构简化：

<body className="min-h-full flex flex-col">
  <Header />
  <main className="flex-1">{children}</main>
  <Footer />
</body>

此前首页对主内容的 flex: none 特例会退出这套伸展规则，导致首页与其他短页面的 Footer 位置不同。当前实现已移除这个特例。

这说明“同一个 Footer 组件”只保证组件代码相同，不保证父布局给它的可用空间相同。长工具页的 Footer 应在内容之后，短页面的 Footer 可落在视口底部，不能要求两者拥有固定的同一 y 坐标。

用浏览器验证水平边界

在本站首页、笔记列表或工具列表的开发者工具控制台，可运行这段只读脚本：

const selectors = {
  header: ".site-header > .site-frame",
  content: "main > .page-shell, main > .home-intro",
  footer: "body > footer > .site-frame",
};
 
console.table(Object.entries(selectors).map(([name, selector]) => {
  const element = document.querySelector(selector);
  if (!element) return { name, missing: true };
  const { left, right, width } = element.getBoundingClientRect();
  return { name, left, right, width };
}));

预期：同一页三个元素的左右边界一致，可留 1 CSS 像素作为本案例的测量容差；缺失元素必须报告，不能跳过。脚本的 content 选择器只覆盖上述三种页面，测文章详情前应按实际布局调整。

数值符合还要看截图：Logo 自身的透明留白、文字基线或某个内部 padding，也会造成视觉上没对齐。外框一致只是排除了一层问题。

本次复查记录

2026-09-05 整理本文时，在当前工作区的生产预览中复查了首页、笔记列表和工具列表。三页在同一视口下，Header、正文外框与 Footer 的测量结果分别一致：

浏览器视口	左边界	右边界	容器宽度
1440×900	112.5	1312.5	1200
390×844	16	359	343

单位是 CSS 像素。这次浏览器为滚动条保留了 15 像素空间，因此手机的可布局宽度是 375，不是 390。其他浏览器或滚动条设置可能得到不同绝对坐标；应比较同一环境中各容器的关系，而不是把这组数值硬编码成所有设备的答案。

这组记录证明当前版本的水平边界一致，不包含改前运行数据，也不代表所有设备和内部元素都已验证。

一个完整的回归范围

建议复查桌面 1440×900 与手机 390×844，这是本案例的验收样本，不是所有设备的覆盖证明。

从首页点击笔记，再进入工具：Header 边界不变，只有选中状态变化。
三页分别测量外容器：Header、正文、Footer 左右边界一致。
手机打开与关闭菜单：导航可操作，整页无横向溢出。
比较短页面 Footer 与长工具页：均按内容流排列，没有硬编码定位。
检查 diff：不夹带颜色、文案、卡片结构或路由改变。
运行项目现有测试与构建，补充页面检查未覆盖的工程回归。

这次应该留下什么

不是一条“以后注意美观”，而是两项可以执行的约定：

页面外容器使用共享宽度，不通过路由特例另设限宽。
公共布局改动，验证首页、目录页、详情页及长短内容，不只看当前截图。

下一次出现类似问题，这两项能直接缩小调查范围；而具体取 75rem 还是其他值，仍应服从当时的设计目标。