如何获得一个div垂直填充表单元格？ [英] How can I get a div to fill a table cell vertically?
问题描述
作为这个问题在表单元格内的绝对定位，我试图得到一些工作在Firefox。再次，我约95％，有只有一个小东西，让我从宣布胜利。使用以下示例标记：
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 just 1 little thing that's keeping me from declaring victory. Using the follow sample markup:
<!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解决方案，但由于表在语义上正确，我想使用一个，如果可能的话。注意，背景颜色只是显示元素的相对大小 - 我不在乎我的布局的背景。另外请注意，我希望单元格有一个灵活的高度，以便它们只能扩展到足以适合他们的内容。
How can I get the wrap div to always fill the cell, so that the management area sits at the bottom of the cell? And yes, the data that I am putting in the table is (in my mind) tabular, so I would like to use a table here. As a last resort, I may turn to an ugly nested div solution, but since a table is semantically correct here I'd like to use one if possible. Note that the background colors are simply to show the relative sizes of the elements - I don't care about background for my layout. Also note that I'd like the cells to have a flexible height, so that they only expand enough to fit their content.
推荐答案
你可以把（相同的）固定高度放在桌子上，因此，换行：
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>
这篇关于如何获得一个div垂直填充表单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
