修复全宽CSS

# 修复全出血 CSS 来源：https://dbushell.com/2026/07/03/fixing-full-bleed-css/ 非 AI 生成 - 人类编写 2026年7月3日，星期五 我是前端开发者，不是医生。如果你在现实世界流血了，请去医院，别再谷歌搜索医疗问题了！ 全出血布局（https://www.joshwcomeau.com/css/full-bleed/）——正如 Josh Comeau 所述——可以通过 CSS Grid（以及 Subgrid（https://dbushell.com/2026/04/02/css-subgrid-is-super-good/））实现。但有时你无法对整个页面使用 Grid。这时候 Andy Bell 的工具类（https://piccalil.li/blog/creating-a-full-bleed-css-utility/）就派上用场了。 ```css .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } ``` 但这个方法并不完美。问题在于视口单位无法解决经典的滚动条问题（https://www.smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem/）。如果你用的是 macOS 或拥有精美滚动条的炫酷操作系统，请到 Windows 上测试！`100vw` 可能比视口宽度还宽。因为浏览器为什么要做合理的事呢？ 在 Andy 的 CodePen（https://codepen.io/piccalilli/pen/vYOJjNw）中很难看出来，但左右两边可能会被裁掉几个像素。添加一些类似边框或阴影的东西就更容易发现了。 ```css .full-bleed { box-shadow: inset 0 0 0 10px yellow; } ``` 黄色边框略微被裁剪。 黄色边框略微被裁剪。忽略左侧的粉色边框，那是我博客的样式。 这并不总是问题，但可能导致微妙的对齐问题。顺便说一句，macOS 有一个滚动条设置 *“显示滚动条 > 始终”*，可以让你测试这个问题。 macOS 外观选项卡中的滚动条设置。 macOS 外观选项卡中的滚动条设置。 Andy 通过隐藏 `html` 元素的水平溢出部分解决了这个问题。 ```css body { overflow-x: hidden; } ``` 另一种修复方法是始终为经典滚动条预留空间。 ```css html { scrollbar-gutter: stable; } ``` 如果没有垂直滚动条，这看起来可能很奇怪。 ## 现代解决方案 “现代”方法是使用 CSS 容器查询（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries）。将 `body` 元素（或任何宽度为 100% 的子元素）变成一个容器。然后用容器单位替换视口单位。 ```css body { container: body / inline-size; overflow-x: clip; } .full-bleed { inline-size: 100cqi; margin-inline-start: calc(50% - 50cqi); } ``` 现在隐藏溢出不再是绝对必要的。我更喜欢 `clip`——可以查看 Ahmad Shadeed 的 Overflow Clip 指南（https://ishadeed.com/article/overflow-clip/）。我出于谨慎使用了 clip，因为我有时会犯蠢（https://dbushell.com/2026/07/02/the-modern-app/）。我还使用了逻辑属性和值（https://dbushell.com/2021/02/02/changing-css-for-good-logical-properties-and-values/）来支持从右到左（RTL）的文字方向。Ahmad 也有一份优秀的 RTL Styling 101（https://rtlstyling.com/）。 但是等等！使用 `cqi` 单位的前提是 `body` 是 `.full-bleed` 元素的父容器。如果我们有嵌套的容器呢？看看这个。 我 fork 了 Andy 的 CodePen（https://codepen.io/dbushell/pen/rajYvPj），添加了另一个 `.inside` 容器，它的宽度**不是**全视口宽度。 使用 Chromium 开发者工具检查 CSS 容器布局，显示内部容器更小。 使用 Chromium 开发者工具检查 CSS 容器布局，显示内部容器更小。 单独来看，这通常会破坏新的 `.full-bleed` 类并搞砸一切。但我们可以修复它！ ```css @property --body-size { syntax: "<length-percentage>"; inherits: true; initial-value: 100%; } body { container: body / inline-size; } .inside { --body-size: 100cqi; container: inside / inline-size; } .full-bleed { inline-size: var(--body-size); margin-inline-start: calc(50% - (0.5 * var(--body-size))); /* † */ } ``` 这个 `@property` 魔法是什么？（https://developer.mozilla.org/en-US/docs/Web/CSS/@property） 说实话，我很难用我这平滑的大脑理解它！让我试着对自己解释一下。 如果没有 `@property` 规则，`--body-size` 的值是在使用时计算的，即在 `.full-bleed` 中，因此相对于 `inside` 容器。通过显式定义 `@property`，该值现在是在 `.inside` 中设置时就计算好了。在那里，`100cqi` 指向父容器 `body`，而 `.full-bleed` 继承了该值。 但如果你有更多容器呢？(╯°□°)╯( ┻━┻ *天啊！* 别这么难搞！我会让 `body` 的直接子元素（比如 `<main>`）来设置 `--body-size` 的值。 ```html <main style="--body-size: 100cqi"> ... </main> ``` † 我乘以 0.5 是因为除法是给笨蛋用的。 ## 下一代解决方案 CSS 需要一种在使用容器单位时引用容器的方法。已经有人提出了一些想法（https://github.com/w3c/csswg-drafts/issues/7858），例如： ```css .full-bleed { inline-size: 100cqi(body); inline-size: calc(100 * cqi(body)); inline-size: calc(100 * container(cqi, body)); } ``` 取消 Interop 2026（https://wpt.fyi/interop-2026），让这变成现实！