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

Posted 2023-03-06

【中文标题】如何在 IE 中使表格单元格的 div 高度为 100%

【英文标题】：How to make div 100% height of table cell in IE

【发布时间】：2016-12-14 03:01:14

【问题描述】：

我想渲染相同大小的盒子的二维数组，其中包含最长内容的盒子将决定所有盒子的高度，所以我决定使用 html 表格来排列所有内容。

但是，在 IE 中，我遇到了表格单元格内的 div 无法填满整个高度的问题，即使它在 chrome 中也能正常工作。这是标记和样式的 sn-p：

.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 中不起作用以及如何使它起作用？我也应该能够将框元素的子元素浮动到底部。

【问题讨论】：

你的 div 没有在每个 td 内关闭

它们是我只是忘记在示例中关闭它们

***.com/a/31728799/3597276

^ 这没有解释什么，为什么它适用于 chrome 而不是在 IE 中，以及如何使它在两者中都适用，当内容时，表格行的高度将是未知的

【参考方案1】：

向前一步是添加

.outer 高度：100vh;

到 Reveler 解决方案。

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

【讨论】：

我想你想的是最小高度。

【参考方案2】：

你真的不应该在本世纪使用表格进行布局。如果要创建表格样式，最简单的选项是在外部 div 上设置 display: table，然后在内部 2 个 div 上设置 display: 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 布局技术。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 是一个很好的起点。

【讨论】：

你在开玩笑吗？客户通常会坚持使用一些旧版浏览器，而您只能梦想现代解决方案

此解决方案不起作用。当我在 display: table-cell 容器中为 div 指定 100% 高度时，它仍然没有填充 IE 中的可用空间，因为我没有为外部或中间容器指定固定高度（内容未知）。同样，在 Chrome 中它工作正常。在 IE (Edge) 中必须有办法克服这个问题

是否要填满浏览器窗口的可用空间？您的问题要求最高元素来决定高度，上述解决方案就是这样做的。

除非您有一个利基（又名企业）目标受众，否则大多数用户实际上都使用现代浏览器，因为默认情况下会自动更新。 caniuse.com/#feat=flexboxcaniuse.com/usage-table

但是您使用的是表格布局。该代码在功能和结构上与表格相同。当然，为整个站点使用表格有点老派，但在某些地方，它对于构建某些布局很有用，如果 flex 不是一个选项，可以使用表格功能。我认为使用实际的表格而不是 CSS 会使它更清晰一些。特别是对于不带有意图语义的类名。