Question

我有一个包含多个单元格的表，没有有关单元格高度的任何信息，但我希望其中一个单元格（这是一个flexbox容器）的内容的高度占用100％的单元格高度：

<table border="1">
  <tr>
    <td>
      <div style="height: 152px">some content</div>
    </td><td style="vertical-align: top">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>

正在寻找弹性盒解决方案，请不要将其更改为基于网格的解决方案。
我不想在<td>中设置背景颜色，例如，有理由在<div>上设置红色背景。

Answer 1

您可以将td height设置为0，然后将外部div的height设置为100％。检查以下代码：

<table border="1">
  <tr>
    <td style="height: 0">
      <div style="height: 100%">some content</div>
    </td><td style="vertical-align: top">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>

表格单元格内CSS 100％高度弯曲

1 个答案: