如何为需要position:fixed的固定浮动div保持父元素的宽度

Question

这是有问题的页面：链接。

请看右侧带有粉色背景、显示“POLL”的边栏。目前，该边栏作为固定浮动元素向下滚动。这个没问题。

问题在于当滚动触发它进入position:fixed时，它的宽度会发生变化。我已经将背景颜色更改为黄色，以便您可以看到它发生的情况。显然，我想保持宽度不变。

这是一个响应式网站，因此像素宽度不是选项。

控制它的CSS如下：

#comment {
position: relative;
top: 0;
background:pink;
}

#comment.fixed {
position: fixed;
width:inherit;
top: 0;
background:yellow;
}

使width为inherit或100％对于解决我的问题没有任何作用。

控制固定div的jquery代码位于源代码的第50行。整个投票区域从源代码的第339行开始。如果有帮助，可以提供更多信息。

我知道position:fixed会将属性转换为继承视口值而不是其相对父级的值。但我猜肯定有解决方案...即使需要一些额外的javascript或jquery来使其正常运行，我也不介意。

谢谢。

- Armin

---

你可能需要设置固定宽度。 - Xarcell

Answer 1

你可以动态地设置CSS，像这样：

var newWidth = $('#comment').parent().width();
$('#comment').width(newWidth);

当你移除 fixed 类之后，你只需要添加这一行：

$('#comment').removeAttr('style');

- Karl-André Gagnon

---

很好，这样就能保持宽度了。现在它在黄色框的底部添加了一些奇怪的填充...你有什么想法是什么原因吗？修订版在这里：(http://underconsideration.com/brandnew_BUILD/individual_for_so.html) - Armin

这是individual_poll的下边距。当您处于固定位置时，会考虑到该边距，而在静态位置下则不会。 - Karl-André Gagnon