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

【问题标题】：How can I get a div to fill a table cell vertically?如何让 div 垂直填充表格单元格？
【发布时间】：2010-09-22 10:27:27
【问题描述】：

作为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 解决方案，但由于这里的表在语义上是正确的，我想尽可能使用一个。请注意，背景颜色只是为了显示元素的相对大小 - 我不关心我的布局的背景。另请注意，我希望单元格具有灵活的高度，以便它们仅扩展至足以容纳其内容。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

不，我需要将管理 div 放到 Firefox 中单元格的底部。背景只是为了显示元素有多大。

【解决方案2】：

您可以在表格单元格上放置（相同的）固定高度并因此包装 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>

【讨论】：

我不知道每行会有多高...我想保持布局灵活，以便单元格的高度与内容所需的一样高。
我认为不可能有任何其他方式，所以也许你可以做一些事情，比如使用 PHP 计算每行中的最大字符数，然后设置行高内联之类的？
@da5id 计数是灾难的根源，因为在一个可以容纳 10 个 i 字符的空间中，只有 5 个 m 字符可以容纳。