Pourquoi le contenu généré dynamiquement ne modifie-t-il pas la hauteur de div divisée?

Question

J'écris un div de bas de page qui affiche des informations de la base de données. Le pied de page a une couleur d'arrière-plan différente du reste de la page et aura une hauteur qui dépend du contenu de la base de données. Lorsque je génère le contenu avec php et que j'appelle une bordure autour du div de pied de page, le contenu apparaît et est, disons, de 400 pixels de haut, mais la bordure div apparaît comme un rectangle de 1 px en haut de la div.

Comment puis-je adapter la hauteur au contenu?

<div id="footer"> 
<?php 


    $an_array=array(); 
    $tasks=mysql_query("select stuff from the db"); 

    while($row=mysql_fetch_assoc($tasks)){ 
     extract($taskrow); 
     $an_array[]=$task; 
     } 

    $an_array=array_chunk($an_array,4); 

    foreach($an_array as $dtkey=>$dtval){ 
     echo "<dl>"; 
     foreach($dtval as $dtvkey=>$dtvval){ 
      echo "<dt>".$dtvval."</dt>"; 

     } 
     echo "</dl>"; 
     } 
?> 
</div> 

C'est ce que je reçois. La zone en dessous de la bordure rouge doit être remplie d'une couleur. border image http://www.kevtrout.com/tortus/div.png

la demande générale, voici le css:

#footer{ 
     border-top: 10px solid #d8d8d8; 
     background:#5b5b5b; 
     /*overflow:auto;*///Added this after seeing your answers, it worked 

     }    
dl.tr{ 
     width: 255px; 
     height:160px; 
     background: #5b5b5b; 
     margin:0px; 
     float:left; 
     padding: 10px; 
     } 

    dt.tr{ 
     font-weight: normal; 
     font-size: 14px; 
     color: #d8d8d8; 
     line-height: 28px; 
     } 

edit: J'utilise Firefox sur un Mac

Answer 1

Vérifiez votre pied de page CSS ... si vous avez trop plein à quoi que ce soit, mais auto/scroll, alors le DIV ne grandira pas.

Sinon essayez d'utiliser autre chose que DL/DT puisque sont des éléments en ligne de DT, ils ne pousseront pas votre div pour s'adapter le contenu. *

par exemple essayez simplement d'utiliser un DIV à la place, si le pied de page se développe, vous avez votre réponse.

(note: Je révisé pour des suggestions)

* (je me rends compte spec-sage, que ce ne devrait- être un problème, mais il n'y avait pas une indication dont les navigateurs cela se produisait dans , donc je ne serais pas du tout surpris si IE rendait différemment que prévu par exemple)

Answer 2

Le navigateur ne se soucie pas si votre contenu est généré par PHP ou provient d'un fichier HTML statique.

Le problème sera probablement dans votre CSS. Soit le contenu que vous mettez dans le pied de page a des propriétés de positionnement (comme float: left ou position: absolute) qui les placent "en dehors" du div ou le div a un ensemble de propriétés de taille et/ou de débordement.

Je vous suggère de poster votre fichier CSS ici ou (si c'est trop grand) mettre en place quelque part où nous pouvons jeter un oeil. Le HTML fini (vous pouvez simplement enregistrer une copie statique de la sortie si votre système n'est pas encore en ligne) ne ferait pas de mal non plus.

Answer 3

Sans voir le CSS, je suppose que vos <dl> s sont flottants pour les obtenir côte à côte. Le <div> contenant alors ne se développera pas pour les contenir. Si tel est le cas avant l'ajout d'un clear:both; le devrait fixer, comme </div> finale ceci:

<div style='clear:both;'></div> 

Answer 4

Par ailleurs, votre utilisation de l'élément <dl> est erroné: il vous manque l'élément <dd>. Les éléments de la liste de définition consistent toujours en une définition terme et une ou plusieurs définitions (qui, dans votre code, sont manquantes).

Aussi, plutôt que d'utiliser <div style='clear:both;'></div> comme suggéré par Steve, je suggérerais d'indiquer explicitement la hauteur de vos éléments <dt>. De cette façon, les flotteurs ne doivent pas être effacés.