作为
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,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解决方案,但是由于表在语义上是正确的,我想使用一个如果可能的话.请注意,背景颜色只是显示元素的相对大小 – 我不关心我的布局的背景.还要注意,我希望单元格有一个灵活的高度,所以它们只能扩展到适合自己的内容.
解决方法
你可以把(固定的)高度放在桌面上因此,
<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>
