CSS中position: fixed结合calc时边距丢失问题求助

这个问题很常见，原因是position: fixed会让元素脱离文档流，它的宽度计算参考系从父容器变成了视口，原来基于父容器的calc(100% - 40px)就不再适用了——此时的100%不再是父容器宽度，而是元素自身内容的宽度，自然边距就失效了。

给你两种简单有效的解决方案：

方法1：用left/right直接锁定边距（推荐） #

这种方式不需要手动计算宽度，直接让元素左右保持固定边距，宽度自动填充视口剩余空间，代码更简洁：

.upper-content {
  background: red;
  position: fixed;
  top: 0;
  /* 左右边距各20px */
  left: 20px;
  right: 20px;
  /* 保留横向滚动 */
  overflow-x: auto;
  /* 可以加上高度，根据你的需求调整 */
  height: 60px;
}

/* 别忘了给下方内容加padding，避免被fixed元素遮挡 */
body {
  padding-top: 60px;
}

方法2：基于视口宽度calc计算 #

如果你更习惯用calc，就把宽度的参考从父容器的100%改成视口宽度100vw，这样计算出来的宽度就是视口减去两边的边距：

.upper-content {
  background: red;
  position: fixed;
  top: 0;
  /* 视口宽度减去左右各20px的边距 */
  width: calc(100vw - 40px);
  margin: 0 20px;
  overflow-x: auto;
  height: 60px;
}

body {
  padding-top: 60px;
}

两种方法都能让fixed元素保留你想要的边距，其中方法1更灵活，不需要手动计算数值，适配各种屏幕尺寸更省心。

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