CODEWITHSUNDEEP
jquerycss
MorningStar
MorningStar

Reputation: 176

resizing child based on parent

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>

Upvotes: 0

Views: 206

Answers (2)

kei
kei

Reputation: 20471

JSFiddle here. Add/remove rows to test.

Upvotes: 1

yitwail
yitwail

Reputation: 2009

Something like this works, if you give all the divs ids, like container, tab1, tab2:

$(document).ready(function() {
  $('#tab2').height(
    Math.max($('#container').height()
             -$('#tab1').height(), 0));
});

I updated your fiddle here

Upvotes: 0

Related Questions