为什么动态生成的内容不会改变包含div的高度？

我正在写一个显示数据库信息的页脚div。页脚与页面的其他部分具有不同的背景颜色，并且将具有取决于数据库对其引发多少内容的高度。当我使用php生成内容并调用页脚div的边框时，出现的内容是400px高，但div边框在div顶部显示为1px高的矩形。为什么动态生成的内容不会改变包含div的高度？

如何获得自动适合内容的高度？

<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>

这就是我得到的。红色边框下面的区域应该填充一种颜色。 border image http://www.kevtrout.com/tortus/div.png

应广大用户要求，这里是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; 
     }

编辑：我使用在Mac

来源

2008-11-02 kevtrout

你应该在应用样式的地方显示CSS，以便我们可以看到问题是否存在，因为它很可能是 – YonahW 2008-11-02 14:52:54

火狐检查您的页脚CSS ...如果你有溢出设置为任何东西，但自动/滚动，那么DIV不会增长。

如果不尝试使用比DL/DT以外的东西，因为DT的是内联元素，他们不会把你的DIV，以适应内容。*

例如只是尝试使用DIV，如果页脚增长，你有你的答案。

（注意：我修改的建议顺序）

*（我知道规范的角度来看，这不应是一个问题，但没有指示哪些浏览器这是存在的中，因此我不会感到惊讶，如果IE浏览器呈现与预期不同的例如）

来源

2008-11-02 14:53:32 scunliffe

为什么内联元素不会增加div的大小？除非有CSS来浮动一切，否则div有像你说的溢出设置，dl/dt/dd应该没问题。 – Lasar 2008-11-02 14:57:24

一旦我将溢出设置为自动，页脚展开并显示背景色。我没有调整DL/DT。谢谢！ – kevtrout 2008-11-02 15:02:09

浏览器不关心，如果您的内容是由PHP生成或来自静态HTML文件。

该问题很可能会在您的CSS。您在页脚中放置的内容具有定位属性（如float：left或position：absolute），将它们放置在div的“外部”或div具有固定大小和/或溢出属性集。

我建议在这里发布你的CSS文件或者（如果它太大）把它放在我们可以看一看的地方。完成的HTML（如果你的系统还没有在线，你可以保存一份输出的静态副本）也不会伤害任何一方。

来源

2008-11-02 15:01:22 Lasar

没有看到CSS，我的猜测是你的<dl> s是浮动的，以让他们并排。包含<div>然后不会扩展以包含它们。如果这是将最终</div>前clear:both;应该修复它，像这样的情况：

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

来源

2008-11-02 15:03:56 stevemegson

顺便说一句，你的<dl>元素的使用是错误的：你缺少的元素<dd>。定义列表中的项目总是由一个定义术语和一个或多个定义（在您的代码中缺失）组成。

此外，我并不建议您按照Steve的建议使用<div style='clear:both;'></div>，而是建议您明确指出您的<dt>元素的高度。这样，花车就不必清理了。

来源

2008-11-02 15:16:28

为什么动态生成的内容不会改变包含div的高度？

回答

相关问题