calc(100% - 20px) 为什么侧边栏不缩？
因为 calc() 本身没问题，但多数人忘了：父容器没设宽、或侧边栏用了 float / position: absolute，导致百分比计算失去参照。浏览器对 width: calc(100% - 20px) 的“100%”取的是**包含块的 width**，而如果父元素是 display: block 且未显式设宽，它的宽度由内容撑开，不是视口宽度。
实操建议：
- 确保侧边栏父容器（比如
.layout）设置了width: 100%或max-width: 100vw - 避免用
float布局——它会让元素脱离文档流，calc()计算结果可能被忽略 - 若用
position: absolute，必须同时设left和right，否则width: calc(100% - 20px)中的 100% 是相对于最近定位祖先，而非视口 - 更稳妥的做法是把侧边栏和主内容都放进 flex 容器：
display: flex，再对侧边栏设flex: 0 0 calc(100% - 20px)
响应式下用 calc() 配合媒体查询的坑
很多人写 @media (max-width: 768px) { .sidebar { width: calc(100% - 40px); } }，结果小屏下侧边栏还是占满——因为没重置其他影响宽度的属性。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
margin-left或padding-left在小屏下没清掉，calc(100% - 40px)算出来仍是超宽 - 侧边栏用了
min-width: 250px，在窄屏下强制撑开，calc()被覆盖 - 媒体查询里只改了
width，但没同步调整flex-basis（如果父容器是 flex）
正确做法是：媒体查询中统一控制尺寸相关属性，例如：
@media (max-width: 768px) {
.sidebar {
flex: 0 0 calc(100% - 2rem);
margin: 0;
padding: 0;
}
}calc(100vw - 60px) 比 calc(100% - 60px) 更可靠？
是的，但仅限于你真需要“减去固定像素后铺满整个视口”的场景。因为 100vw 总是等于当前视口宽度（含滚动条），而 100% 依赖父级，层级一深就容易错位。
使用场景：
- 侧边栏要贴左、主内容贴右，两者之间留固定间隙（如 60px），且整体横跨整个屏幕
- 你明确知道父容器不会缩进、不会有 padding 或 border 干扰
注意点：
-
100vw包含垂直滚动条宽度（通常 ~17px），在内容超长时，calc(100vw - 60px)可能导致水平溢出 - 部分旧版 Safari 对
100vw支持不稳定，iOS 10–12 有渲染抖动问题 - 如果页面有
html { overflow-x: hidden }，100vw行为会更可预测
用 CSS 变量 + calc() 动态调侧边栏宽度
硬编码 calc(100% - 20px) 不灵活，换用变量才能适配主题、用户偏好或运行时状态。
实操建议：
- 定义变量时别漏单位：
:root { --sidebar-gap: 20px; }，而不是--sidebar-gap: 20 - 在组件级作用域覆盖变量更安全：
.layout--compact { --sidebar-gap: 12px; } - 避免在变量里塞表达式：
--sidebar-width: calc(100% - var(--sidebar-gap))是合法的，但不要写成--sidebar-width: calc(var(--full-width) - var(--gap))—— 因为--full-width本身不能是100%（CSS 变量不解析百分比上下文） - JS 修改变量要带单位：
element.style.setProperty('--sidebar-gap', '16px')，写成'16'会导致 calc 失效
复杂点在于：calc() 里的单位混合（比如 calc(100% - 1rem)）虽合法，但 rem 会随根字体大小变化，而 % 是相对父容器，两者基准不同——这种组合看似聪明，实则难调试，尤其当用户缩放页面或切换系统字体时。真要用，先测 iOS Safari 和 Chrome Android 的表现是否一致。
