如何让position:fixed容器占满百分比宽度的父容器？

当父容器使用百分比宽度，子容器设置position: fixed时，由于fixed元素脱离文档流、以视口为包含块，默认不会继承父容器的宽度。要让子容器和父容器宽度一致，可采用以下纯CSS方案：

方案一：使用CSS变量同步宽度 #

通过CSS变量将父容器的宽度值传递给子容器，确保两者宽度一致：

.parent{
  width: 50%;
  border: solid green 2px;
  --parent-width: 50%; /* 定义变量存储父容器宽度 */
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: var(--parent-width); /* 使用变量同步宽度 */
  left: 0; /* 与父容器左对齐，保持位置一致 */
  box-sizing: border-box; /* 确保边框包含在宽度内，避免超出父容器 */
}

方案二：直接设置子容器宽度为父容器的百分比值 #

如果父容器宽度固定为某个百分比（比如50%），可直接给子容器设置相同的宽度，并对齐左侧：

.parent{
  width: 50%;
  border: solid green 2px;
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: 50%;
  left: 0;
  box-sizing: border-box;
}

方案三：利用calc()适配复杂场景（可选） #

如果父容器有内边距或其他偏移，可结合calc()调整宽度和位置：

.parent{
  width: 50%;
  padding: 0 10px;
  border: solid green 2px;
  box-sizing: border-box;
  --parent-width: 50%;
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: calc(var(--parent-width) - 20px); /* 减去父容器的左右内边距 */
  left: 10px; /* 与父容器内边距对齐 */
  box-sizing: border-box;
}

关键说明 #

• box-sizing: border-box是核心：它让元素的边框和内边距包含在宽度计算内，避免子容器因边框超出父容器宽度。
• fixed定位的元素默认以视口为基准，设置left: 0能让子容器和左对齐的父容器位置保持一致。

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