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

Question

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

作为关于表格单元格中绝对定位的这个问题的后续内容,我正试图在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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Var*_*hta 0

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

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

归档时间：	17 年，2 月前
查看次数：	8560 次
最近记录：	14 年，7 月前