Html 设置固定定位div相对于其具有最大宽度的父项的宽度

没有JS有什么解决方案吗

html

我不能为

.wrapper

添加任何其他样式，除了

宽度：100%。
我尝试使用
width:inherit
，但它不适合我，因为我的父div只有max width

这是一个位置：fixed

元素不再相对于其父元素。它只考虑视口的边界

:

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

因此任何

width

、

max width

或任何属性都不会受到固定元素的尊重

编辑

实际上，它不会继承

width

，因为包装器上没有定义

width

属性。。因此，尝试将子项设置为

width:100%

，并继承

max width

：

---

列上已经有一个宽度，只需将固定元素的宽度设置为继承即可。没有理由把事情复杂化

CSS:

HTML:

...

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

它解释了关于

width:inherit

---

“固定自身相对于视口的位置…无论何时继承宽度（位置固定），它都将相对于视口”

这并不意味着它不会通过继承值继承父对象的宽度。@HashemQolami，这是真的。。。事实上，它不会继承

宽度

，因为父级中没有

宽度

。。。我已经更新了答案。非常有效，谢谢。我认为您应该删除这个“因此任何宽度、最大宽度或任何属性都不会受到固定元素的尊重”，因为严格来说这不是真的：如果父元素有宽度，那么在固定位置子元素上设置width:inherit（而不是width:100%）就可以了。

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

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


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

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


.fix {
    max-width: inherit;
    width: 100%;
    height: 20px;
    position:fixed;
    background: black;
}

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

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