Html 如何使固定定位的div使用其父级的剩余宽度？

我在一个容器中有两列（其宽度在我们的情况下动态变化）左列（绿色）的固定宽度始终为100px，并且与通常一样随文档流动右栏（蓝色）有一个位置：fixed，因为我有一个JS代码，它根据滚动位置设置右栏的顶部和底部位置

我希望我的固定定位右列不会在X轴上展开其父列，而只使用左列的左侧空间。可能吗

现在我有了width:inherit，它实际上使整个右列具有与其父列相同的宽度。但是我必须从这个宽度中减去左栏的宽度，这样右栏就不会扩展容器

下面是我问题的简化版本：

.container{
边缘顶部：30px；
高度：1400px；
宽度：600px；
背景颜色：浅灰色；
边框：2件纯黑；
}
.左栏{
高度：1200px；
宽度：100px；
背景颜色：绿色；
}
.右栏{
位置：固定；
顶部：50px；
左边距：110px；/*始终固定，因为左列的宽度不变*/
高度：200px；
宽度：继承；
最大宽度：继承；
背景颜色：蓝色；
}

---

将父容器

.container

设置为具有

transform:translate（0,0）

。这将使固定元素“固定”到父对象而不是视口。然后使用

calc（100%-110px）

设置固定元素的宽度。这将考虑

边距

，并将其从固定元素的总宽度中删除

您需要根据需要调整

top

值

.container{
边缘顶部：30px；
高度：1400px；
宽度：600px；
背景颜色：浅灰色；
边框：2件纯黑；
变换：平移（0,0）；
}
.左栏{
高度：1200px；
宽度：100px；
背景颜色：绿色；
}
.右栏{
位置：固定；
顶部：50px；
左边距：110px；/*始终固定，因为左列的宽度不变*/
高度：200px；
宽度：计算（100%-110px）；
最大宽度：继承；
背景颜色：蓝色；
}

谢谢您的回答。。这个想法真的很好，但不幸的是，它在我的情况下不起作用。在垂直方向上，右栏应该与视口相对，因为使用JS进行的所有顶部和底部计算都无法更改。@akcasoy啊，这不是您最初问题的一部分。如果您使用JS来设置顶部和底部，为什么不使用它来设置

右列的高度呢？你对JS有多大的控制权？请看这个网站：他们有类似的“右栏结构”。我们需要设置相对于视口的顶部和底部。唯一的区别是，在我们的例子中，当父容器变宽或变窄时，右列的宽度可以更改。是否必须为右列使用position:fixed？或多或少是的。。你可以在这个网站上看到类似的行为：由于滚动位置的依赖性，右栏也有一个固定的位置。不同的是，在我们的例子中，当容器变宽或变窄时，右栏的宽度可以改变。我认为使用css flex或css网格（不带位置：fixed）这是可以实现的，如果您能够将javascript更改为设置边距顶部而不是顶部。