html - 将 <td> 内绝对定位的 <div> 的高度设置为 <table> 的高度？

Question

我主要使用 D3.js(link 到功能示例)创建甘特图。甘特图有垂直网格线来分隔每一天的列(下图中右侧的列)，整个 table 有水平网格线来分隔每一行/元素。下面是生成图表的示例:

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

<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 的高度):

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

• div.inner - position:relative；宽度:19px
• div.background - position:absolute；顶部:-1px；左:-1px；右-1px；行高:24px

Again, here's a functioning example of the chart's HTML and CSS (JSBin)。到目前为止，我对解决方案的尝试包括将 table 的 position 设置为 relative 以及各种类似的事情。我什至考虑过将高度设置为荒谬的值，例如 9999px 并在 table 上设置 overflow-y: hidden 但如果有的话，我更喜欢更简洁的解决方案。

Answer 1

哇，这是一个非常简单的解决方案，我希望我只是想得更多。

将 table 设置为 position: relative，从 .inner 中移除定位，然后简单地移除 top .background 中的 code>、left 和 right 样式及其设置 height: 100% 导致它正确定位。

我猜原因是如果你绝对定位一个元素，默认情况下它会位于它本来应该在的位置，如果它只是静态定位的话。因此，我可以让 div 位于正确的位置，只要不摆弄 top、left 或 right(以便它位于单元格中的正确位置)，然后将 height 设置为 100%(现在相对于 table 的高度)，并设置 div 的 width。