I have 2 tables. The first table (I will call it Table A) has a max-height assigned to it so the table below it (Table B) will move up depending on if Table A has enough content in it to fill the max-height. I need to get Table B to fill out the rest of the space that is left (when Table A doesn’t fill out the max-height) without going outside of parent container. I would really love to do this with CSS but I’m not sure if I can at this point (been Googling for about 2 hours now). jQuery seems like the next option but I’m not quite sure where to start.
Check out this fiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:440px;border:1px solid red;">
<div style="border:1px solid black;max-height:175px;overflow:auto;">
<table width="100%" border="0">
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div><br />
<div style="border:1px solid black;height:175px; overflow:auto;">
<table width="100%" border="">
<tr>
<td>Section Header</td>
</tr>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
</tr>
<tr>
<td>Row 10</td>
</tr>
<tr>
<td>Row 11</td>
</tr>
<tr>
<td>Row 12</td>
</tr>
<tr>
<td>Row 13</td>
</tr>
</table>
</div>
</div>
</body>
</html>
JSFiddle here. Add/remove rows to test.