Question

作为this question关于表格单元格中绝对定位的后续内容，我正试图在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>

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

Answer 1

你可以将（相同的）固定高度放在桌子上因此包裹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>

Answer 2

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

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

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

2 个答案: