如何在IE11中使Div沿父级TR高度拉伸（兼容Chrome效果）

问题出在IE11对表格单元格（<td>）的position: relative支持上——当<td>的高度由同一行其他单元格的内容决定时，IE11不会为这个相对定位的单元格建立正确的包含块，导致你用position: absolute + top:0 + bottom:0的方式无法让div拉伸填满高度。

这里有两种可靠的解决方案，你可以根据需求选择：

方案1：舍弃absolute定位，用百分比高度适配 #

这种方法更符合表格布局的原生特性，兼容性更好：

<table>
  <tr>
    <td style="width: 50px">
      <div style="height: 50px; background-color: #0C59CF"></div>
    </td>
    <td style="width: 50px; height: 100%">
      <div style="height: 100%; background-color: #5cb85c"></div>
    </td>
  </tr>
</table>

• 给第二个<td>添加height: 100%，让它继承<tr>的高度（由第一个单元格的50px div决定）
• 内部div设置height: 100%，就能自动填满整个td的高度，在IE11和Chrome中表现一致

方案2：保留absolute定位，修复IE11的包含块问题 #

如果必须使用absolute定位，可以通过给td添加一个块级容器来修复：

<table>
  <tr>
    <td style="position: relative; width: 50px">
      <div style="height: 50px; background-color: #0C59CF"></div>
    </td>
    <td style="width: 50px; height: 100%">
      <div style="position: relative; display: block; height: 100%">
        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #5cb85c"></div>
      </div>
    </td>
  </tr>
</table>

• 给第二个td添加height: 100%确保它继承行高
• 在td内部新增一个块级容器，设置position: relative和height: 100%，这个容器会成为absolute div的正确包含块，让top:0 + bottom:0在IE11中生效

内容的提问来源于stack exchange，提问作者Алексей