css 100%高度在表格单元格内伸缩[重复]

pqwbnv8z  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(190)
    • 此问题在此处已有答案**:

height: 100% for inside with display: table-cell(7个答案)
Percentage Height HTML 5/CSS(7个答案)
100% height div inside table-cell not working on Firefox(1个答案)
两年前就关门了。
我有一个包含多个单元格的表格,没有关于单元格高度的任何信息,但我希望其中一个单元格(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>

1.正在寻找Flexbox解决方案,请不要将其更改为基于网格的解决方案。
1.我不想在<td>中设置背景颜色,在<div>上设置红色背景是有原因的。

sqougxex

sqougxex1#

您可以将tdheight设置为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>

相关问题