如何使表格內的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>