如何计算分栏容器内目标区域宽度以适配站点内容边界？

核心逻辑 #

站点内容容器为80%宽度、最大1080px且居中，分栏则是满宽布局。要让条纹区域始终贴合站点内容的左右边界，关键是让条纹区域的有效宽度与站点内容容器一致，同时自动适配分栏的任意占比。

具体实现方案 #

1. 定义全局站点内容宽度变量 #

先用CSS变量统一管理站点内容的宽度，自动适配响应式：

:root {
  --site-content-width: min(80%, 1080px);
}

这个变量会在视口宽度超过1350px（即1080px / 0.8）时固定为1080px，小于1350px时取视口的80%，完美匹配站点内容的规则。

2. 适配任意分栏的两种实现方式 #

方式一：自动居中适配（推荐）

利用max-width和margin: auto，让条纹区域在分栏内自动对齐站点内容边界：

.column .stripe {
  max-width: var(--site-content-width);
  margin: 0 auto;
  /* 自定义条纹背景样式示例：
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fff 10px, #fff 20px);
  */
}

原理：无论分栏是75%、25%还是其他比例，max-width限制了条纹区域的最大宽度为站点内容宽度，margin: 0 auto会让它在分栏内部水平居中，自然贴合站点内容的左右边界。

方式二：手动计算偏移量（精准控制场景）

如果需要精确控制偏移，用calc()计算分栏内的左右边距：

.column .stripe {
  width: var(--site-content-width);
  /* 偏移量 = (分栏宽度 - 站点内容宽度) / 2 */
  margin-left: calc((100% - var(--site-content-width)) / 2);
}

注意：确保分栏本身是块级元素或设置了width: 100%，否则100%会指向分栏的父容器而非分栏自身。

3. 断点适配无需额外处理 #

由于var(--site-content-width)已经通过min()实现了响应式逻辑，所有断点下条纹区域都会自动适配站点内容的边界，无需额外编写媒体查询。

验证示例 #

假设分栏为75%/25%布局：

.columns-container {
  display: flex;
  width: 100%;
}
.column.left {
  width: 75%;
}
.column.right {
  width: 25%;
}

应用上述样式后，左右分栏内的.stripe元素都会自动调整，完全贴合站点内容的紫色区域边界。

内容的提问来源于stack exchange，提问作者Jillian Hoenig