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

Question

Given the HTML structure below, how do I make td.expand fill up the remaining vertical space of #outer ? I've tried various solutions (including Flexbox), but nothing worked for me. Unfortunately, I'm stuck with the two tables, so assume the HTML structure cannot be changed. Also, assume that #outer is inside a modal that can be resized, so its height is dynamic (ie, as the user resizes the modal, the height of #outer is changed, and td.expand should continuously fill up the vertical space such that the header and footer will always be at the top and bottom of #outer , respectively.

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

The output should look like this, where td.expand fills up the remaining space of #outer :

Answer 1

Just calculate the the height by subtracting occupied height by footer and header and two tr from the parent 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

I played a little with flex. Did you need such a result? The red block is stretchable.

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