有一个表格填充其容器的剩余高度

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/