CSS制作一个块元素填充父元素的整个空间在Chrome

这个问题已经被问（并回答）以前在：CSS: Make a block element fill the entire space of a parent element?CSS制作一个块元素填充父元素的整个空间在Chrome

然而，接受的解决方案并没有在Chrome中工作（如指出的mercator评论）。建议将高度：100添加到<tr>元素的修复程序也不起作用。有谁知道如何通过基于webkit的浏览器实现这种效果？链接http://dl.getdropbox.com/u/26620/stackoverflow1.html（由原始海报提供）显示此问题。它在FF/IE中工作，但不是铬。

谢谢。

来源

2009-11-09 Simon

当然有人，某处必须有这个想法！ :-) – Simon 2009-12-08 13:35:11

我在Chrome中尝试这样做，它似乎伟大的工作：http://apptools.com/examples/tdcolor.php

这里的CSS（称之为test.css）：

table.navbar { 
    border-collapse: collapse; 
} 
table.navbar td { 
    border: 1px solid #ccc; 
} 
table.navbar td a{ 
    display: block; 
    width: 9em; 
    padding: 3px; 
    text-decoration: none; 
} 
table.navbar td a:link, table.navbar td a:visited { 
    color: #000; 
    background-color: #fff; 
} 
table.navbar td a:hover, table.navbar td a:active { 
    color: #fff; 
    background-color: #666; 
}

和样本HTML文件（记得要改变路径到test.css文件）：

<html> 
<head> 
<link rel='stylesheet' href='CHANGE PATH TO YOUR test.css' type='text/css' media='all' /> 
</head> 
<body> 
<p><strong>Example:</strong></p> 

<table border=0 cellspacing=0 cellpadding=0> 
<tr> 
<td><table border=0 cellspacing=0 cellpadding=0 class=navbar> 
<tr> 
<td class=navbar><a href="javascript:void(0);">First that is very, very, long to make sure that everything is working correctly <b 

style="color:black;background-color:#a0ffff">Link</b></a></td> 
</tr> 
<tr> 
<td class=navbar><a href="javascript:void(0);">Another <b style="color:black;background-color:#a0ffff">Link</b></a> </td> 
</tr> 
<tr> 
<td class=navbar><a href="javascript:void(0);">A Third <b style="color:black;background-color:#a0ffff">Link</b></a> </td> 

</tr> 
</table></td> 
<td valign=top class=othercontent><p>Other content goes here.</p></td> 
</tr> 
</table> 

</body> 
</html>

这是否适合您？

来源

2011-01-10 10:09:33 Nathan

CSS制作一个块元素填充父元素的整个空间在Chrome

回答

相关问题