有一個表格填充其容器的剩餘高度

Question

我有一個固定大小的容器，其中包含未知數量的自調整段落以及其他可能的元素。那個內容之後我也有一張桌子。我想要表格填充容器的剩餘高度。

我有以下HTML：

​<div id="container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis. Sed semper dui sed ante. Sed luctus tincidunt nisl. Proin iaculis adipiscing nisl. Class aptent taciti sociosqu ad litora amet.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur cras amet.</p> 
    <table> 
     <thead> 
      <tr> 
       <th>One</th> 
       <th>Two</th> 
       <th>Three</th> 
       <th>Four</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>111</td> 
       <td>222</td> 
       <td>33333</td> 
       <td>4444</td> 
      </tr> 
      <tr> 
       <td>111</td> 
       <td>222</td> 
       <td>33333</td> 
       <td>4444</td> 
      </tr> 
      <tr> 
       <td>111</td> 
       <td>222</td> 
       <td>33333</td> 
       <td>4444</td> 
      </tr> 
      <tr> 
       <td>111</td> 
       <td>222</td> 
       <td>33333</td> 
       <td>4444</td> 
      </tr> 
     </tbody> 
    </table> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

用下面的CSS：

#container { 
    width: 500px; 
    height: 500px; 
    background: red; 
} 

p { 
    margin-bottom: 20px; 
} 

table { 
    height: 100%; 
    width: 100%; 
} 

table, 
table th, 
table td{ 
    border: 1px solid black; 
} 

這樣做會導致表取容器的高度，而不僅僅是其餘區域。我已經嘗試將容器和孩子設置爲css中的表格和表格行，並且要麼導致其他元素太大，要麼鬆動邊緣。

小提琴，可以發現在：http://jsfiddle.net/QLwkU/

我希望的是純CSS的解決方案，但我沒有問題，如果它是一個合理的和可重複使用的jQuery的解決方案。

我已經試過：

var totalHeight = 0; 
$('#container').children(':not(table)').each(function(){ 
    totalHeight += $(this).outerHeight(true); 
}); 
$('#container table').css({'height': ($('#container').outerHeight() - totalHeight)}); 

但是，它使較爲困難的邊距添加到表，如果需要一個。

任何想法或建議將不勝感激。

Answer 1

好的，謝謝大家的建議。爲此，我會稍微修改一下版本，以適應我的需求，使事情變得更有活力。我在表格的外部尺寸和內部尺寸上添加了差異，以防止在表格中使用邊距。

$('#container table').css('height', (
    $('#container').height() - 
    $('#preTableContainer').outerHeight(true) - 
    ($('#container table').outerHeight(true) - 
    $('#container table').height()) 
)); 

和修改後的CSS

#container { 
    width: 500px; 
    height: 500px; 
    background: red; 
} 

#preTableContainer { 
    overflow: hidden; 
} 

p { 
    margin-bottom: 20px; 
} 

table { 
    width: 100%; 
    margin-bottom: 20px; 
} 

table, 
table th, 
table td{ 
    border: 1px solid black; 
} 

的HTML是一樣的只是包裹在自己的格非表的內容。

一個工作小提琴：

http://jsfiddle.net/QLwkU/10/

感謝所有的建議。希望新的CSS3盒子模型能夠使這個過程更加簡單。

Answer 2

我不知道如何與純CSS做到這一點，但使用jQuery做的一個簡單的方法：

首套所有來到桌子前到另一件中的內容，然後減去其高度從固定高度（500在這種情況下），而且應該給你的表的高度：

tmpHeight = $("#container").height() - $(".nonTableContainer").height(); 
$('table').css('height',tmpHeight+"px"); 

這裏的小提琴：http://jsfiddle.net/QLwkU/7/

而且你原本20像素的段落底部邊緣。爲了正確地獲得非表格容器的高度，可以將邊距改爲填充，或者簡單地從jQuery代碼中的tmpHeight中減去20。在上面的小提琴中，我將邊距改爲填充。

Answer 3

http://jsfiddle.net/QLwkU/8/試試這種方式。在表格前設置一些div，並給他一些高度，在這種情況下爲30％。然後給桌子高度70％。這樣div + table = 100％的容器。然後你可以放入你想要的新div元素。

Answer 4

這種你想要的東西，但在桌子上的邊界正在擴大。

http://jsfiddle.net/QLwkU/9/

更多的代碼將需要計算總邊框高度並從中減去總myTableHeight變量。

Answer 5

我有同樣的問題，我解決了它使用純CSS。

因此，如果您有一個容器中包含一些內容，然後在該容器中添加一個表格，並且希望該表格填充該容器中的剩餘高度，則只需將高度設置爲100％即可該表將佔用容器的所有剩餘空間。

<div id="container" style="height:200px"> 
Some random content 
<table style="height:100%;background-color:blue;"><tr><td>Test 1</td></tr></table> 

</div> 

檢查了這一點更多細節：http://jsfiddle.net/tonyawad88/StTAr/