Html 如何在IE中使表格单元格的div达到100%高度

我想呈现大小相等的框的二维数组，其中包含最长内容的框将决定所有框的高度，因此我决定使用HTML表来排列所有框

然而，在IE中，我遇到了一个问题，即表格单元格内的div无法填充整个高度，即使它在铬合金中也能正常工作。以下是标记和样式的片段：

.boxArrayTable td {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 30px;
    padding-right: 20px;
}

<table class="boxArrayTable">
  <tbody>
    <tr>
      <td><div class="box" /></td>
      <td><div class="box" /></td>
    </tr>
    <tr>
      <td><div class="box" /></td>
      <td><div class="box" /></td>
    </tr>
  </tbody>
</table>

div.box {
    overflow: auto;
    background-color: white;
    display: inline-block;
    min-width: 222px;
    height: 100%;
}

.boxArrayTable td{
空白：nowrap；
溢出：隐藏；
填充底部：30px；
右边填充：20px；
}
分区箱{
溢出：自动；
背景色：白色；
显示：内联块；
最小宽度：222px；
身高：100%；
}

---

为什么这在IE中不起作用，以及如何让它起作用？此外，我应该能够将box元素的子元素浮动到底部。

在本世纪，您真的不应该使用表格进行布局。如果要创建表格样式，最简单的选项是在外部div上设置display:table，然后在内部的两个div上设置display:table单元格

div {background-color: yellow;}

.outer {display: table; width: 200px}
.mid {display: table-row;}
.inner {display: table-cell; width: 50%}

<div class="outer">
  <div class="mid">
    <div class="inner">
      Blah
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet consecusomething blah blah blah you get the idea.
    </div>
  </div>
</div>

div{背景色：黄色；}
.outer{显示：表格；宽度：200px}
.mid{显示：表行；}
.inner{显示：表格单元格；宽度：50%}
废话
Lorem ipsum dolor坐在amet的座位上，诸如此类诸如此类，诸如此类，你明白了。

---

如果你打算以此为生，那么我强烈建议你学习flexbox布局技术。这是一个很好的起点。

向前迈出的一步是添加

.外部{高度：100vh；}

到狂欢者的解决方案

---

话虽如此，我无法让edge在内容溢出的地方滚动内容。

您的div在每个TDI中都没有关闭它们，我只是忘了在示例中关闭它们。^这并不能解释什么，为什么它在chrome中工作，而在IE中不工作，以及如何使它在内容同时在这两种情况下工作，因此表行的高度将是未知的。开玩笑吗？大多数情况下，客户都坚持使用传统浏览器，而您只能梦想现代解决方案。此解决方案不起作用。当我在display:table单元格容器中为div指定100%高度时，它仍然无法填充IE中的可用空间，因为我没有为外部或中间容器指定固定高度（内容未知）。同样，在铬合金中，它工作得很好。在IE（Edge）中必须有办法克服这一问题。是否要填充浏览器窗口的可用空间？您的问题要求使用最高的元素来指定高度，上述解决方案就是这样做的。除非您有一个利基（又称公司）目标受众，否则大多数用户实际上都使用现代浏览器，因为默认情况下会自动更新。但您使用的是表布局。该代码在功能和结构上与表相同。当然，在整个站点中使用表格有点老套，但是在某些特定的地方，如果flex不是一个选项，它可以用于构建某些布局，在这些布局中可以使用表格功能。我认为使用实际的表而不是CSS会使它更清晰一些。特别是对于没有语义的类名，我认为你考虑的是最小高度。