如何使用 position:fixed 使 div 占据整个父宽度（并随之调整大小）？答案

【问题标题】：How to make a div with position:fixed occupy the entire parent width (and resize with it)?如何使用 position:fixed 使 div 占据整个父宽度（并随之调整大小）？
【发布时间】：2011-04-28 16:32:36
【问题描述】：

看到这个小提琴：http://jsfiddle.net/eEe2C/2/

绿色的第 1 行是固定的，但不会像其他蓝色行那样拉伸整个父宽度。将第 1 行视为网格中的列标题。需要对其进行修复，以便在任何时候都可见，并且在滚动时所有行都可以在其下方“滑动”。第 1 行和其他行之间的唯一区别是第 1 行的位置：固定。

当水平调整大小时，蓝色行的“单元格”会根据它们的宽度百分比很好地扩展。绿色行的“单元格”忽略了这一点（我知道为什么，只是需要一个解决方案）。

如何让第 1 行的拉伸行为保持不变？标题当然应该与数据“单元格”对齐。如果可能，请不要使用 post-js hack。

编辑：不能使用表格，因为我正在使用拖放排序，这与表格完全不兼容。

【问题讨论】：

有什么理由需要使用 CSS 来伪造 HTML 表格的隐含行为吗？
据我所知，如果没有 JS hack，这是不可能的。但是……我不是专家。
好吧，行涉及到大量的拖放排序，这与表格不能很好地配合。另外，我无法跨浏览器很好地设置表格样式。
在 row1 上设置 width:100% 使其占据整个浏览器窗口，这让我相信一定有办法让它占据其他父元素的整个宽度......？有大师吗？

标签： html css width css-position stretching

【解决方案1】：

如果我理解正确，你的意思是这样吗？虽然您可能希望在容器上设置特定宽度。

http://jsfiddle.net/eEe2C/6/

【讨论】：

不，我仍然需要将 row1 定位：固定，以便 row1 保持在视口中，无论滚动位置如何。
我明白你的意思。也许这就是您正在寻找的：jsfiddle.net/eEe2C/12 由于没有 CSS 重置，我认为有一些默认边距和填充，所以我将两者的 body 都设置为 0。我添加了一些背景以查看元素的位置，但您可以将它们取出。
是的，可行，但我确实需要一个更通用的解决方案，其中父容器规定所有包含元素的扩展宽度。

【解决方案2】：

尽管它是一个演示，但对我来说它看起来像表格数据，所以只需使用 <table>。使用table with a fixed height <tbody> 可能会很好地解决您的问题。

【讨论】：