CSS Faire un élément de bloc remplir tout l'espace d'un élément parent dans CHROME

Cette question a été posée (et répondu) précédemment à: CSS: Make a block element fill the entire space of a parent element?CSS Faire un élément de bloc remplir tout l'espace d'un élément parent dans CHROME

Cependant, la solution retenue ne fonctionne pas dans CHROME (comme indiqué dans le commentaires par mercator). Le correctif suggérant d'ajouter une hauteur de 100 à l'élément <tr> ne fonctionne pas non plus. Est-ce que quelqu'un sait comment réaliser cet effet avec les navigateurs Web-basés? Le lien http://dl.getdropbox.com/u/26620/stackoverflow1.html (fourni par l'auteur original) montre ce problème. Il fonctionne en FF/IE mais pas en chrome.

Merci.

Source

2009-11-09 Simon

Sûrement quelqu'un, quelque part doit avoir une idée à ce sujet! :-) – Simon

J'ai essayé dans Chrome et il semble fonctionner à merveille: http://apptools.com/examples/tdcolor.php

Voici le css (appeler 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; 
}

et un fichier HTML exemple (souvenez-vous de changer le chemin vers le fichier 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>

Est-ce que cela fonctionne pour vous?

Source

2011-01-10 10:09:33 Nathan

CSS Faire un élément de bloc remplir tout l'espace d'un élément parent dans CHROME

Répondre

Questions connexes