时间戳

首页 > 解决方案 > 如何使表格内的div填满剩余空间

html - 如何使表格内的div填满剩余空间

问题描述

鉴于下面的 HTML 结构，我如何td.expand填充剩余的垂直空间#outer？我尝试了各种解决方案（包括 Flexbox），但对我没有任何效果。不幸的是，我被这两个表卡住了，所以假设 HTML 结构不能改变。另外，假设它#outer在一个可以调整大小的模态中，所以它的高度是动态的（即，当用户调整模态的大小时，高度#outer会改变，并且td.expand应该不断填充垂直空间，这样页眉和页脚将始终分别位于 的顶部和底部#outer。

#outer {
  height: 400px; /* dynamic */
  background: skyblue;
}
.fixed {
  height: 20px;
}
header,
footer {
  height: 50px;
  border: 1px solid black;
}
<div id="outer">
  <div id="container">
    <header>Header</header>
    <table class="outer-table">
      <tr>
        <td>
          <div class="content">
            <table class="inner-table">
              <tr><td class="expand">This should fill up remaining vertical space.</td></tr>
            </table>
          </div>
        </td>
      </tr>
      <tr class="fixed"><td>Fixed height</td></tr>
      <tr class="fixed"><td>Fixed height</td></tr>
    </table>
    <footer>Footer (should be pushed to the bottom)</footer>
  </div>
</div>

输出应如下所示，其中td.expand填充了 的剩余空间#outer：

在此处输入图像描述

标签： htmlcssflexbox

解决方案

只需通过从父项中减去和和两个height占用height来计算footerheadertrheight

#outer {
  height: 400px;
  background: skyblue;
}

header,
footer {
  height: 50px;
  border: 1px solid black;
}

.content {
  background: red;
  height: 245px;
}
<div id="outer">
  <div id="container">
    <header>Header</header>
    <table class="outer-table">
      <tr>
        <td>
          <div class="content">
            <table class="inner-table">
              <tr>
                <td class="expand">This should fill up remaining height of #outer (blue)</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td>Fixed height</td>
      </tr>
      <tr>
        <td>Fixed height</td>
      </tr>
    </table>
    <footer>Footer</footer>
  </div>
</div>

推荐阅读