具有灵活高度的表格单元格内的绝对定位

Question

我在一个表格单元格中有 2 个 div，希望一个与单元格顶部对齐，另一个与单元格底部对齐。

我创建了这个 jsFiddle http://jsfiddle.net/davew9999/3Mwz5/11/，它显示了我拥有的 HTML 结构。代码如下：

HTML

<table>
<tbody>
    <tr>
        <td>
            <div class="cell">
                <div class="top">This text is dynamic so can't set fixed height on this div. For example
                    this text could be very long while the others are quite short.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height.</div>
            </div>
        </td>
        <td>
            <div class="cell">
                <div class="top">Not much text.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height</div>
            </div>
        </td>
    </tr>
</tbody>
</table>

CSS

tr {
    vertical-align: baseline;
}
td {
    padding:10px
}
.cell {
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
}

我找到的所有解决方案都涉及在包装器 div 上设置高度（在我的示例中为“cell”类的 div）。但是，这对我不起作用，因为内容是动态的。

我尝试了一个解决方案，我计算了加载时 td 元素的高度，并将类“cell”的 div 设置为相同的高度。这一直有效，直到我调整浏览器窗口的大小，从而导致表格单元格的高度发生变化。我尝试处理浏览器窗口调整大小事件，但是在单击和拖动调整大小期间会触发很多。它必须在 IE8 及其缓慢的 JavaScript 引擎中工作，并且有超过 200 个 td 元素来检查这不是一个合理的解决方案。

给我所需输出的解决方案是将 div 的内容与“top”类和 div 与“bottom”类拆分到 2 个表格行中，但是我想知道是否有纯 CSS 解决方案或更好的解决方案我尝试过的 CSS 和 JavaScript 解决方案。

Answer 1

无法测试这个，因为我在 iPad 上听课时卡住了，但是

亲戚 底部-1

应该将一个元素固定到绝对底部 反之亦然

除了将高度设置为父级外，还应该强制 e 单元格获得与 td 相同的高度（100% 剂量这个？）

再次无法测试 ATM，直到 jfiddle 修复 ipad chrome/safari 问题

编辑：twitter bootstrap 不会这样做吗 你有脚手架类吗？

编辑2：脚手架和响应http://twitter.github.com/bootstrap/scaffolding.html#responsive