如何获得div来垂直填充表格单元格？

作为一个表格单元格内的绝对定位this question的后续行动，我试图让一些在Firefox中工作。再次，我在这里约95％，并且只有一点让我无法宣告胜利。使用后续样品标记：如何获得div来垂直填充表格单元格？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; border-collapse:collapse} 
     th, td { border:1px solid black; vertical-align: top; } 
     th { width:100px; } 
     td { background:#ccc; } 
     .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     p{ margin: 0 0 5px 0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
       <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
    </table> 
    </body> 
</html>

我怎样才能获得包装的div总是充满细胞，从而使管理区坐落在小区的底部？是的，我放在桌子上的数据（在我的脑海里）是表格式的，所以我想在这里使用一个表格。作为最后的手段，我可能会转向一个丑陋的嵌套的div解决方案，但是由于表格在语义上是正确的，所以我想尽可能使用一个表格。请注意，背景颜色只是显示元素的相对大小 - 我不关心我的布局的背景。另外请注意，我希望单元具有灵活的高度，以便它们只扩展到足以适应其内容。

来源

2008-11-14 Chris Marasti-Georg

你只是想让backrground匹配相同的颜色？而不是对齐，那么你可以在CSS中使用背景图像来给出相同的效果，因为FF不会将元素渲染到容器内的100％。如果容器被设置为自动高度，则该孩子也将被设置为自动。使渲染速度更快。

所以最好的选择是一个CSS背景图像。

来源

2008-11-14 22:06:08

没有，我需要得到管理div来在Firefox中电池的底部。背景只是为了显示元素的大小。 – 2008-11-14 22:12:19

你可以把（下同）的表格单元格&包裹格正是如此固定的高度：

<style type="text/css"> 
table { width:500px; border-collapse:collapse} 
th, td { height:200px; border:1px solid black; vertical-align: top; } 
th { width:100px; } 
td { background:#ccc; } 
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; } 
.manage { text-align:right; position:absolute; bottom:0; right:0; } 
p{ margin: 0 0 5px 0; } 
</style>

来源

2008-11-14 22:28:59 da5id

我不知道每行的高度是多少......我想让布局更加灵活，以便单元格与内容需要的高度一样高。 – 2008-11-14 23:17:33

如何获得div来垂直填充表格单元格？

回答

相关问题