DIV extensible à hauteur de 100% dans une cellule de tableau
J'ai mise en page suivante:
4 coins arrondis à l'arrière-plan et de deux panneaux (panneau de gauche et de droite) à l'intérieur.
Actuellement je mettre en œuvre la disposition comme suit:
Table avec 9 cellules:
coin en haut à gauche | | coin en haut à droite gauche |div droit div| coin en bas à gauche | | coin en bas à droite
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="corner1.jpg" /></td>
<td>
</td>
<td>
<img src="corner2.jpg" /></td>
</tr>
<tr>
<td>
</td>
<td valign="top" height="100%">
<div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000">
Menu
</div>
<div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888">
Main Content
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="corner3.jpg" /></td>
<td>
</td>
<td>
<img src="corner4.jpg" /></td>
</tr>
</table>
</body>
</html>
Ce que je veux poser est de savoir comment je peux étirer la hauteur de la droite div 100% de sorte qu'il est égal à la hauteur de la td (hauteur de gauche div augmentent en fonction des utilisateurs d'action).
J'ai essayé de nombreuses façons et ne peut toujours pas comprendre.Définir la hauteur de la div à 100% ne fonctionne pas.
Que dois-je faire pour réaliser cela? Ne pas utiliser de tableau?
PS:
Le code est changé. Vous pouvez coller le code dans le bloc-notes et de le tester dans IE.
Le code est modifié à nouveau pour ajouter le DOCTYPE.
Vous devez vous connecter pour publier un commentaire.
De voir que vous avez déjà des tables pour la mise en page, je ne serais pas vraiment la peine d'essayer de le faire de la "droit" façon.
Suffit d'utiliser une autre table.
CSS
HTML
peut-être que vous pouvez ajouter un min-height pour le droit div est égale à la valeur de la hauteur de celui de gauche... il pourrait peut-être faire l'affaire pour ce que vous voulez...
Ou que diriez-vous simplement à l'aide d'un span?
par exemple.
Ne vous inquiétez pas trop à propos de l'100% dans le tableau des éléments, mais plutôt un regard sur la durée..
La durée de :
Voir le "display:inline-block'? Maintenant, c'est la partie importante..
J'espère que cela aide..
Vous pouvez définir la position de la div pour être absolue, mais alors bien sûr, vous auriez à la position absolument.
J'ai utilisé jquery et l'animer appel à l'ensemble des hauteurs de divs, mais vous pouvez définir l'animer vitesse à 0.
L'exemple belows était le cas pour certaines maquettes pour rapidement à jouer avec 2,3,5... bloc de dessins. Le Jquery animate appel est utilisée pour la taille de la hauteur de divs pour le contenu principal, la barre latérale, etc, ... mais c'est peut être un peu plus haut pour votre condition.