[英]Set height of absolutely positioned <div> inside <td> to <table>'s height?
I'm working on creating a Gantt chart primarily using D3.js ( link to the functioning example). 我正在主要使用D3.js( 链接到功能示例)来创建甘特图。 The Gantt chart has vertical gridlines to separate each individual day column (the columns on the right in the picture below), and the whole
table
has horizontal gridlines which separates each row/project. 甘特图具有垂直网格线以分隔每个单独的日列(下图右侧的列),并且整个
table
具有水平网格线,以分隔每个行/项目。 Here's an example of the generated chart: 这是生成的图表的示例:
In order to drastically cut down on the number of elements that are created and improve performance, instead of creating a table cell for each project/date address (which would create #rows * #days
elements), I opted to simply draw those vertical gridlines using one absolutely positioned div
in the header cell for each day. 为了大幅度减少创建的元素数量并提高性能,而不是为每个项目/日期地址创建一个表格单元(这会创建
#rows * #days
元素),我选择简单地绘制这些垂直网格线每天在标题单元格中使用一个绝对定位的div
。 For example, in the picture, the 30
, 31
, 1
, etc. cells each have an absolutely positioned div
whose height I've manually set to the full height of the table. 例如,在画面中,
30
, 31
, 1
每个,等细胞具有绝对定位div
,其高度我已经手动设置表中的全部高度。 The structure of the chart is like so: 图表的结构如下:
<table>
<tr><td colspan="5"></td><td>2012-12-30 to ...</td> ... </tr>
<tr>
<td></td>
<td>Est. Duration</td>
<td>% Completed</td>
<td>Est. Start Date</td>
<td>Est. End Date</td>
<td class="day-cell">
<div class="inner">
<div class="background" style="height: 260px;">30</div>
</div>
</td>
<td class="day-cell">
<div class="inner">
<div class="background" style="height: 260px;">31</div>
</div>
</td>
<td class="day-cell">
<div class="inner">
<div class="background" style="height: 260px;">1</div>
</div>
</td>
...
</tr>
<tr class="project-row">...</tr>
<tr class="project-row">...</tr>
...
</table>
This works wonderfully except for that last caveat of having to manually set the height. 除了最后一个需要手动设置高度的警告外,这非常有用。 Ideally, I'd like to be able to set the height of
div.background
to 100%
in reference to the height of the full table itself, without having to use JavaScript, although if it's absolutely necessary/impossible to avoid, I will concede. 理想情况下,我希望能够参考整个表本身的高度将
div.background
的高度设置为100%
,而不必使用JavaScript,尽管如果绝对有必要/不可能避免的话,我会承认。 This problem is most relevant/noticeable once you begin to add or remove project rows (to simulate this, I just decreased the height of the div
's in the picture below): 一旦开始添加或删除项目行,此问题最相关/最明显(为模拟此问题,我只是降低了下图中
div
的高度):
The relevant styles for the classes in the code above are: 上面代码中这些类的相关样式是:
div.inner
- position: relative; width: 19px
div.inner
position: relative; width: 19px
position: relative; width: 19px
div.background
- position: absolute; top: -1px; left: -1px; right -1px; line-height: 24px
div.background
position: absolute; top: -1px; left: -1px; right -1px; line-height: 24px
position: absolute; top: -1px; left: -1px; right -1px; line-height: 24px
Again, here's a functioning example of the chart's HTML and CSS (JSBin). 同样,这是图表的HTML和CSS (JSBin) 的有效示例 。 My attempts at solutions so far have included setting the
position
of the table
to relative
and various similar things. 到目前为止,我对解决方案的尝试包括将
table
的position
设置为relative
和各种相似的事物。 I've even considered setting the height to something absurd like 9999px
and setting overflow-y: hidden
on the table but I'd prefer a cleaner solution if there is one. 我什至考虑过将高度设置为
9999px
荒唐之9999px
并在桌面上设置“ overflow-y: hidden
在桌子上,但如果有的话,我更喜欢一种更清洁的解决方案。
Wow, this is a really simple solution and I wish I'd simply thought it through more. 哇,这是一个非常简单的解决方案,我希望我能仔细考虑一下。
Setting the table
to position: relative
, removing the positioning from .inner
, and then simply removing the top
, left
, and right
styles from .background
and setting on it height: 100%
caused it to position properly. 设置
table
到position: relative
,从取出定位.inner
,然后简单地去掉top
, left
和right
的风格.background
,并在其上设置height: 100%
导致其正确定位。
I'm guessing the reason is that if you absolutely position an element, it will by default be located at the position where it would have been were it simply statically positioned. 我猜想原因是,如果您绝对定位一个元素,则默认情况下它将位于原本静态定位的位置。 Therefore, I can have the
div
be in the correct location just by not fiddling with the top
, left
, or right
(so that it's positioned in the correct place in the cell), then setting the height
to 100%
(which is now relative to the table
's height), and setting the width
of the div
. 因此,我可以使
div
处于正确的位置,只需不摆弄top
, left
或right
(以便将其放置在单元格中的正确位置),然后将height
设置为100%
(现在是相对的)到table
的高度),然后设置div
的width
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.