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

Question

鉴于下面的 HTML 结构，我如何让td.expand填充#outer的剩余垂直空间？ 我尝试过各种解决方案（包括 Flexbox），但对我没有任何帮助。 不幸的是，我坚持使用这两个表，所以假设 HTML 结构无法更改。 此外，假设#outer在一个可以调整大小的模态内，因此它的高度是动态的（即，当用户调整模态大小时，# td.expand #outer连续填充垂直空间，例如header 和页脚将始终分别位于#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>

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

Answer 1

只需从父height中减去footer占用的height和header和两个tr即可计算出height

 #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>

Answer 2

我玩了一点flex。 你需要这样的结果吗？ 红色块是可拉伸的。

 #container { display: flex; justify-content: space-between; flex-direction: column; height: 100%; width: 100%; }.outer-table { display: flex; height: 100%; }.outer-table > tbody { display: flex; flex-direction: column; width: 100%; }.outer-table > tbody > tr:first-of-type { flex: 1 1 auto; }.outer-table > tbody > tr > td { display: flex; flex-direction: column; height: 100%; } #outer { height: 400px; background: skyblue; } header, footer { height: 50px; border: 1px solid black; }.content { background: red; flex: auto; }

 <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>