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

Question

See this fiddle: http://jsfiddle.net/eEe2C/2/

The green row 1 is fixed but does not stretch the entire parent width which the other blue rows do. Think of row 1 as the column headers in a grid. It needs to be fixed in order to be visible at all times and for all rows to "slide" underneath it when scrolling. The only difference between row 1 and the other rows is that row 1 has position:fixed.

When resizing horizontally, the "cells" of the blue rows expand just fine according to their width percentage. The "cells" of the green row ignores this (I know why, just need a solution).

How do I get the same stretching behaviour for row 1 still keeping it fixed? The headers should of course be aligned with the data "cells". Please, no post-js hack if possible.

Edit: can't use tables as I'm using drag'n'drop sorting that doesn't play well at all with tables.

Answer 1

If I'm understanding it correctly, do you mean like this? Although you might want to set a specific width on the container.

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

Answer 2

Even though it's a demo, it looks like tabular data to me so just use a <table> . Using a table with a fixed height <tbody> might be a good solution to your problem.