CSS：如何根据内部设置最小和最大高度？

Question

假设我有一个100vh高度的表，如何根据内部和最大thead设置tbody的最小高度？

<table style="height: 100vh;">
    <thead>...</thead>
    <tbody>...</tbody>
</table>

Answer 1

这是你要找的吗？

更新

做了一些测试并注意到身体高度无法通过浏览器正常工作，以下更新确实（在Chrome，Firefox，Edge，IE11上测试）

html, body {
  margin: 0;
}
table {
  width: 100%;
  height: 100vh;
}
table thead tr {
  height: 80px;      /*  on table elements, height works kind of like min-height  */
  background: yellow;
}
table tbody tr {
  background: lime;
}

<table>
  <thead>
    <tr>
      <td>
        HEAD<br>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        BODY
      </td>
    </tr>
  </tbody>
</table>

Answer 2

你可以按照黑客来实现你的目标。 使用最小高度为thead，但不是0.使用0％为tbody

＆＃13;

＆＃13;

html,body{
  margin:0;
  }
table{
  width:100%;
  height: 100vh;
  border: 1px solid black;
}
thead{
  background: red;
  height:1px;
}
tbody{
  background: blue;
  height:0%;
}

＆＃13;

<table>
    <thead>
      <tr>
        <td colspan="4">
          <img src="http://dummyimage.com/100x100/eb00eb/fff">
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>BODY</td>
        <td>BODY</td>
        <td>BODY</td>
        <td>BODY</td>
      </tr>
    </tbody>
  </table>

＆＃13;

＆＃13;

＆＃13;