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

核心原因 #

设置position: fixed的元素会脱离文档流，其包含块是浏览器视口而非父容器，因此默认无法直接继承父容器的百分比宽度。

解决方案 #

方法一：CSS变量同步宽度

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

.parent{
  width: 100%; /* 按需求保持100%宽度 */
  border: solid green 2px;
  --parent-width: 100%; /* 与父容器width值同步 */
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: var(--parent-width); /* 继承父容器宽度变量 */
}

如果父容器宽度是动态响应式的，只需同步更新--parent-width变量即可。

方法二：视口百分比直接匹配

若父容器宽度是基于视口的百分比（比如示例中的50%），直接给子元素设置相同宽度，并调整位置对齐父容器：

.parent{
  width: 50%;
  border: solid green 2px;
  margin: 0 auto; /* 父容器居中示例 */
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: 50%; /* 与父容器宽度一致 */
  left: 25%; /* 计算方式：(100% - 父容器宽度)/2，实现居中对齐 */
}

方法三：JavaScript动态计算

适配复杂动态布局场景时，通过JS获取父容器计算宽度并赋值给子元素：

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

// 初始化宽度
const setChildWidth = () => {
  const parentWidth = window.getComputedStyle(parent).width;
  child.style.width = parentWidth;
};
setChildWidth();

// 监听窗口 resize 动态更新
window.addEventListener('resize', setChildWidth);

需求匹配示例（父容器100%宽度） #

.parent{
  width: 100%;
  border: solid green 2px;
}
.child{
  height: 200px;
  border: solid red 2px;
  position: fixed;
  width: 100%; /* 直接设置为100%，与父容器同宽 */
}

<div class="parent">
  <div class="child">
    <p>Text text text</p>
  </div>
</div>

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