Как я могу получить 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>

Как я могу заставить div div всегда заполнять ячейку, чтобы область управления располагалась в нижней части ячейки? И да, данные, которые я помещаю в таблицу (на мой взгляд), являются табличными, поэтому я хотел бы использовать таблицу здесь. В крайнем случае я могу обратиться к уродливому вложенному решению div, но поскольку таблица семантически корректна, я бы хотел использовать ее, если это возможно. Обратите внимание, что цвета фона - это просто показать относительные размеры элементов - мне не нужен фон для моего макета. Также обратите внимание, что я хотел бы, чтобы ячейки имели гибкую высоту, чтобы они только расширялись настолько, чтобы соответствовать их контенту.

Ответ 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>

Ответ 2

Вы просто пытаетесь заставить backrground соответствовать одному и тому же цвету? и не выравнивание, то вы можете использовать фоновое изображение в css, чтобы дать тот же эффект, cos FF не отображает элемент на 100% внутри контейнера. Если контейнер установлен на автоматическую высоту, то для ребенка также будет установлено значение auto. Это делает рендеринг быстрее.

Таким образом, лучшим вариантом будет css-фоновое изображение.