如何使带有position:fixed的div占据整个父宽度(并调整大小)?
请参阅此小提琴: http://jsfiddle.net/eEe2C/2/
绿色第 1 行已修复但不会像其他蓝色行那样拉伸整个父级宽度。将第 1 行视为网格中的列标题。需要对其进行修复,以便始终可见,并且滚动时所有行都可以在其下方“滑动”。第 1 行和其他行之间的唯一区别是第 1 行具有position:fixed。
水平调整大小时,蓝色行的“单元格”会根据其宽度百分比很好地扩展。绿行的“单元格”忽略了这一点(我知道为什么,只需要一个解决方案)。
如何让第 1 行获得相同的拉伸行为并保持固定?标题当然应该与数据“单元格”对齐。如果可能的话,请不要使用 post-js hack。
编辑:无法使用表格,因为我使用的拖放排序与表格根本无法很好地配合。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果我理解正确的话,你的意思是这样吗?尽管您可能想在容器上设置特定的宽度。
http://jsfiddle.net/eEe2C/6/
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/
尽管它是一个演示,但对我来说它看起来像表格数据,因此只需使用
即可。使用具有固定高度的表格
可能会能很好的解决你的问题。
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.