Question

我正在创建一个主要使用D3.js（link到功能示例）的甘特图。甘特图具有垂直网格线以分隔每个单独的日期列（下图中右侧的列），整个table具有分隔每行/项目的水平网格线。以下是生成的图表的示例：

An example generated Gantt chart

为了大幅减少创建的元素数量并提高性能，不是为每个项目/日期地址创建表格单元格（这将创建#rows * #days元素），我选择简单绘制那些垂直网格线在每天的标题单元格中使用一个绝对定位的div。例如，在图片中，30，31，1等单元格都有一个绝对定位的div，其高度我手动设置为全高的表。图表的结构如下：

<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>

除了必须手动设置高度的最后一点警告之外，这非常有效。理想情况下，我希望能够将div.background的高度设置为100%，以引用整个表本身的高度，而不必使用JavaScript，尽管如果它绝对必要/不可能避免，我会承认。一旦开始添加或删除项目行，这个问题最为相关/明显（为了模拟这一点，我只是降低了下图中div的高度）：

Improper gridlines

上面代码中类的相关样式是：

div.inner - position: relative; width: 19px
div.background - 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）。到目前为止，我对解决方案的尝试包括将position的{{1}}设置为table以及各种类似的事情。我甚至考虑将高度设置为像relative这样荒谬的东西，并在桌面上设置9999px，但如果有的话，我更喜欢更清洁的解决方案。

Answer 1

哇，这是一个非常简单的解决方案，我希望我能够更多地考虑它。

将table设置为position: relative，从.inner移除定位，然后只移除top，left和right .background中的样式及其height: 100%上的设置使其定位正确。

我猜测的原因是，如果你绝对定位一个元素，它将默认位于它原本只是静态定位的位置。因此，我可以让div位于正确的位置，而不是摆弄top，left或right（以便它位于正确的位置）单元格），然后将height设置为100%（现在相对于table的高度），并设置width的{{1}}

将绝对定位的<div>的高度设置为高度？<table> </table> </div>

1 个答案: