css - 在可变高度 td 高度 :100% that works cross-browser 中制作 div

Question

在有人开始尖叫“不要使用表格进行布局”之前，我无法创建适合我的情况的非表格布局。

由于明显的原因，直接设置 height: 100% 不起作用(也许不是很明显，但我理解为什么它不起作用):

<td>
    <div style='height:100%'></div>
</td>

---

尝试使用绝对定位:

<td style='position:relative'>
    <div style='position:absolute; top:0px; bottom:0px;'></div>
</td>

在 FF 中中断，因为它无法识别 td 上的定位。在 IE9 中也神秘地崩溃了。

Answer 1

为了使百分比值适用于高度，必须确定 parent 的高度!

这意味着 td 元素需要定义 height:

<table>
    <tr>
        <td style='height:100px'>
           <div style='height:100%'>hi</div>
       </td>
    </tr>
</table>