根据父母调整孩子的尺寸

问题描述

| 我有2张桌子。第一个表（我将其称为表A）分配有一个“ 0”，因此它下面的表（表B）将根据表A中是否有足够的内容填充“ 0”而上移。我需要获取表B来填充剩余的剩余空间（当表A不填写max-height时），而无需离开父容器。我真的很想用CSS做到这一点，但是我不确定在这一点上是否可以（现在谷歌搜索了大约2个小时）。 jQuery似乎是下一个选择，但我不确定从哪里开始。看看这个小提琴

<!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在这里。添加/删除行进行测试。 ,如果您提供所有div的ID（例如container，tab1，tab2），则类似的方法就会起作用：

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

我在这里更新了你的小提琴

孩子尺寸尺寸父母调整

根据父母调整孩子的尺寸

问题描述

解决方法

相关问答