Faire stretch div s'adapter td hauteur

Salut J'ai ce code,Faire stretch div s'adapter td hauteur

<html> 
    <body> 
     <table> 
      <tr> 
       <td> 
        <div class="the-div">h:100%</div> 
       </td> 
       <td> 
        <div class="the-div-w-height">h:100px</div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

avec ce style,

.the-div 
{ 
    height: 100%; 
    background-color: red; 
} 

.the-div-w-height 
{ 
    height : 100px; 
    background-color: yellow; 
}

Je veux faire le tronçon div rouge à l'intérieur du td, l'autre div peut changement de hauteur en fonction du contenu, la première div doit étirer avec la table

Merci

Source

2014-07-06 Mohamed Wagdy Khorshid

Voir http://stackoverflow.com/questions/14442747/making-a-div-inherit-the-height-of-parent-td -using-only-css –

[** ici vous allez **] (http://jsfiddle.net/3k6kq/1/) – NoobEditor

@NoobEditor OK dans Chrome, KO dans Firefox (nécessite également 'td {height: 100% } 'Je suppose) – FelipeAls

Ajout height: 100% sur les parents table et td:

http://codepen.io/anon/pen/ByjIv

table { 
    height: 100%; 
} 
td { 
    border: 1px solid #000; 
    height: 100%; 
} 
.the-div 
{ 
    height: 100%; 
    background-color: red; 
} 

.the-div-w-height 
{ 
    line-height: 100px; 
    background-color: yellow; 
}

Source

2014-07-06 10:18:45 FelipeAls

Je ne veux pas changer la hauteur de la table ou le td, cela va étirer la table pour s'adapter à toute la page –

?? Cela ne change rien à la hauteur de la table (vérifiez le Codepen). Mais dans le deuxième commentaire à votre question (de gillesc), c'est ce que fait la solution de Pete. – FelipeAls

Faire stretch div s'adapter td hauteur

Répondre

Questions connexes