Comment avoir la hauteur de la table html = hauteur de div div lorsque la hauteur de div n'est pas définie

J'ai une table html, à l'intérieur d'un div. La hauteur de div est basée sur d'autres éléments de la div.Comment avoir la hauteur de la table html = hauteur de div div lorsque la hauteur de div n'est pas définie

Comment puis-je avoir la hauteur de la table égale à la hauteur de sa div parente?

(hauteur de la table: 100% ne fonctionnera pas parce que la hauteur de la div est pas défini)

Mise à jour: J'ai besoin de soutenir IE6,7,8 afin que les recommandations css doivent être compris par ces navigateurs.

Source

2010-04-13 Tony_Henrich

Pourquoi ne peut-il pas y avoir une hauteur sur le div parent? – quoo

Parce que je ne veux pas contraindre la hauteur si quelqu'un redimensionne la police ou s'il y a plus de contenu. La hauteur devrait s'ajuster pour s'adapter au contenu. –

-1

Une hauteur de table de 100% doit remplir tout espace disponible dans son conteneur div parent. Si vous ne pouvez pas définir la hauteur sur le parent div, essayez d'utiliser height="100%" sur la table plutôt que CSS. Je sais, ce n'est pas sémantiquement correct, mais les tableaux fonctionnent parfois un peu bizarrement avec les divs.

Source

2010-04-13 19:34:25

J'ai essayé IE8 et FF 3.6 et cela n'a pas fonctionné –

Vous avez un docType valide sur votre page droite? –

Presque impossible, car le moteur de rendu ne peut pas savoir à quel point 100% devrait l'être.

Une solution de contournement vraiment sale: Ajoutez display:table aux div et display:table-row-group à la table. Ne vous attendez pas trop ... :)

Source

2010-04-13 19:37:28 fuxia

Il n'a eu aucun effet dans IE8. En FF il s'agrandit un peu plus mais il n'a pas pris toute la hauteur. –

Essayez d'utiliser position:relative et min-height:100%;

Mb même posinion:absolute, top:xxx, bottom:xxx, right:xxx et left:xxx - et Postulant height:auto.

Source

2010-04-13 19:43:36 TRAVA

Pour atteindre ce dont vous parlez avec juste css pourrait être assez difficile. Vous pouvez essayer d'utiliser javascript, jQuery ou toute autre bibliothèque javascript pour saisir la hauteur de la div parente, puis l'appliquer comme hauteur à la table. Consultez l'exemple ci-dessous. Peu importe combien de texte est ajouté, il définit dynamiquement la hauteur de la table en fonction de la div parente. Ce n'est pas discret javascript - mais cela devrait vous aider à démarrer.

<html> 
    <head> 
     <title>Table Height set via jQuery</title> 
     <script src="jquery.js" type="text/javascript" charset="utf-8"></script> 

     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function(){ 
       var divHeight = $('div.full').height(); 
       $('table.column_2').css("height", divHeight + "px"); 
       $('table.column_2 .parentDiv').text(divHeight); 
       var tableHeight = $('table.column_2').height(); 
       $('table.column_2 .tableHeight').text(tableHeight); 
      }); 
     </script> 
     <style type="text/css" media="screen"> 
      div.full { 
       width:960px; 
       float:left; 
       } 
      div.column_1 { 
       width:450px; 
       padding:0 10px; 
       float:left; 
       margin-right:10px; 
       background-color:#eee; 
      } 
      table.column_2 { 
       width:470px; 
       float:left; 
       background-color:#ddd; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="full"> 
      <div class="column_1"> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
        id est laborum. 

       </p> 

      </div> 
      <table class="column_2"> 
       <thead> 
        <tr> 
         <th>Table Height</th> 
         <th>Parent Div Height</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="tableHeight"></td> 
         <td class="parentDiv"></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

Source

2010-04-14 00:54:52 mrmrs

Mauvaise nouvelle, vous ne pouvez pas. Il y a tellement de hacks pour eux et aucun d'eux n'est une bonne solution. Javascript comme décrit est la seule façon de le faire mais il prend trop de bande passante sur de petites choses mais utile SI vous prévoyez d'utiliser jQuery pour d'autres fonctions.

CSS 3 a de nouvelles règles qui vous permettent d'avoir cette flexibilité, mais de nombreux navigateurs n'offrent pas un support CSS 3 complet. Puisque vous vouliez IE6/7, vous n'avez pas de chance.

Si c'est VRAIMENT important, vous pouvez utiliser des tables minimales. Ne laissez pas les autres vous dire que c'est faux quand il fonctionne pour pratiquement tous les navigateurs de bureau et même les navigateurs mobiles fonctionnent très bien tant qu'ils ne sont pas imbriqués pas plus de deux niveaux de profondeur.

Une autre solution consiste à créer des conceptions de mise en page qui ne dépendent pas de la vérification d'autres hauteurs DIV.

Source

2010-09-15 06:10:10 netrox

Comment avoir la hauteur de la table html = hauteur de div div lorsque la hauteur de div n'est pas définie

Répondre

Questions connexes