如何让div垂直填充表格单元格？

As a followup to this question on absolute positioning within a table cell, I'm trying to get something working in Firefox. Once again, I'm about 95% there, and there's just 1 little thing that's keeping me from declaring victory. Using the follow sample markup:

作为关于表格单元格中绝对定位的这个问题的后续,我正试图在Firefox中使用某些东西。再一次,我大概有95%,并且只有一件小事让我无法宣布胜利。使用以下示例标记:

<!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>

How can I get the wrap div to always fill the cell, so that the management area sits at the bottom of the cell? And yes, the data that I am putting in the table is (in my mind) tabular, so I would like to use a table here. As a last resort, I may turn to an ugly nested div solution, but since a table is semantically correct here I'd like to use one if possible. Note that the background colors are simply to show the relative sizes of the elements - I don't care about background for my layout. Also note that I'd like the cells to have a flexible height, so that they only expand enough to fit their content.

如何让wrap div始终填充单元格,以便管理区域位于单元格的底部?是的,我放在表格中的数据(在我看来)是表格式的,所以我想在这里使用一个表格。作为最后的手段,我可能会转向一个丑陋的嵌套div解决方案,但由于表在语义上是正确的,我想在可能的情况下使用一个。请注意,背景颜色只是为了显示元素的相对大小 - 我不关心布局的背景。另外请注意,我希望单元格具有灵活的高度,以便它们仅扩展到足以适应其内容。

2 个解决方案

#1

You could put (the same) fixed height on the table cell & wrap div thusly:

您可以将(相同的)固定高度放在表格单元格上并因此包裹div:

<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>

#2

Are you just trying to get the backrground to match the same colour? and not alignment, then you can use a background image in css to give the same effect, cos FF does not render the element to 100% inside a container. If the container is set on auto height, then the child will be set to auto too. The makes the rendering faster.

你只是想让背景与相同的颜色相匹配吗?并且没有对齐,那么你可以在css中使用背景图像来产生相同的效果,因为FF不会将元素渲染到容器内的100%。如果容器设置为自动高度,则子项也将设置为auto。使渲染更快。

So the best bet would be a css background image.

所以最好的选择是css背景图片。

#1