如何使带有position:fixed的div占据整个父宽度(并调整大小)?

发布于 2024-11-04 02:00:09 字数 433 浏览 7 评论 0原文

请参阅此小提琴: 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

春花秋月 2024-11-11 02:00:09

如果我理解正确的话,你的意思是这样吗?尽管您可能想在容器上设置特定的宽度。

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/

救赎№ 2024-11-11 02:00:09

尽管它是一个演示,但对我来说它看起来像表格数据,因此只需使用 即可。使用具有固定高度的表格可能会能很好的解决你的问题。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文