CSS Make a block element fill the entire space of a parent element in CHROME
This question has been asked (and answered) previously at: CSS: Make a block element fill the entire space of a parent element?
However, the accepted solution does not work in CHROME (as noted in the comments by mercator). The fix suggesting to add a height:100 to the <tr> element doesn't work either. Does anyone know how to achieve this effect with webkit-based browsers? The link http://dl.getdropbox.com/u/26620/stackoverflow1.html (provided by the original poste开发者_运维问答r) shows this issue. It works in FF/IE but not chrome.
Thanks.
I tried this in Chrome and it seems to work great: http://apptools.com/examples/tdcolor.php
Here's the css (call it 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;
}
And a sample html file (remember to change the path to the test.css file):
<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>
Does that work for you?
加载中,请稍侯......
精彩评论