根據家長調整孩子的大小

我有2個表格。第一個表（我將稱之爲表A）有一個max-height分配給它，所以它下面的表（表B）將向上移動取決於表A是否有足夠的內容填充max-height。我需要讓表B填寫剩下的剩餘空間（當表A沒有填寫max-height時），而不會超出父容器。我真的很喜歡用CSS來做到這一點，但我不確定我是否可以在這個時候（現在已經用谷歌搜索了大約2個小時）。 jQuery似乎是下一個選項，但我不太確定從哪裏開始。
退房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>

來源

2011-05-25 ComatoseDuck

的jsfiddle here 。添加/刪除要測試的行。

來源

2011-05-25 22:36:53 kei

非常感謝，作品像魅力。 – ComatoseDuck 2011-05-27 14:21:42

事情是這樣的工作，如果你給所有的div的ID，像集裝箱，TAB1，TAB2：

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

我更新了小提琴here

來源

2011-05-25 22:34:40 yitwail

根據家長調整孩子的大小

回答

相關問題