Question

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

然而，在IE中，我遇到问题，其中表格单元格内的div不会填满整个高度，即使它在chrome中工作正常。这是标记和样式的片段：

.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%;
}

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

Answer 1

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

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>

如果您计划以此为生，那么我强烈建议您学习flexbox layout techbiques。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/是一个很好的起点。

Answer 2

向前迈出的一步是添加

.outer {height：100vh;}

到Reveler解决方案。

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

如何在IE中制作表格单元格的100％高度

2 个答案: