How can I get a div to fill a table cell vertically?

Question

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

Answer 1

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.

So the best bet would be a css background image.

Answer 2

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

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