Question

有没有JS的解决方案吗？

HTML

<div class="wrapper">
   <div class="fix"></div>
</div>

CSS

.wrapper {
  max-width: 500px;
  border: 1px solid red;
  height: 5500px;
  position: relative;
}


.fix {
  width: inherit;
  height: 20px;
  position:fixed;
  background: black;
}

除了.wrapper之外，我无法为width: 100%;添加任何其他样式。我尝试使用width: inherit，但它不适合我，因为我的父div只有max-width。 source

这是JsFiddle Demo

Answer 1

position:fixed元素不再与其父元素相关。它只尊重视口的boudaries。

MDN Definition：

已修复
不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。

因此固定元素不会遵守任何width，max-width或任何属性。

修改

实际上，它不会继承width，因为在包装器上没有定义width属性。所以，尝试将子项设置为width: 100%并继承{{1 }}：

http://jsfiddle.net/mx6anLuu/2/

max-width

Answer 2

列上已有宽度，只需设置要继承的固定元素的宽度即可。没有理由让事情复杂化。

CSS：

.col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }

HTML：

<div class="col-sm-3">
    <div class="fixed-in-div">
        ...
    </div>
</div>

Answer 3

没有JS，似乎没有解决方案。 Felipe Tadeo撰写的这篇博文解释了原因：

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

它解释了围绕width: inherit

的混淆

“相对于视口固定位置......每当你继承宽度（位置固定）时，它将相对于视口”

设置固定定位div相对于具有max-width的父级的宽度

3 个答案: