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

Question

我正在编写一个显示数据库信息的页脚div。 页脚具有与页面其余部分不同的背景颜色，并且其高度取决于数据库向其投入的内容量。 当我使用php生成内容并调用页脚div周围的边框时，内容会出现，比如400px高，但div边框在div的顶部显示为1px高的矩形。

如何获得自动调整内容的高度？

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

这就是我得到的。 红色边框下方的区域应填充颜色。 边界图片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上使用firefox

Answer 1

检查您的页脚CSS ...如果您将溢出设置为除自动/滚动之外的任何内容，则DIV将不会增长。

如果不尝试使用DL / DT以外的东西，因为DT是内联元素，它们不会推动你的div适合内容。*

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

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

*（我意识到，这应该不是一个问题，但是没有迹象表明这种情况发生在哪个浏览器中，因此如果IE的渲染方式与预期不同，我也不会感到惊讶）

Answer 2

在没有看到CSS的情况下，我的猜测是你的<dl>被浮动以使它们并排。 然后包含<div>将不会展开以包含它们。 如果是这种情况则添加一个clear:both; 在最终</div>应该修复它，如下所示：

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

Answer 3

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

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

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

Answer 4

顺便说一下，你使用<dl>元素是错误的：你缺少<dd>元素。 定义列表中的项目始终包含一个定义术语和一个或多个定义 （在您的代码中缺少这些定义 ）。

另外，不是像Steve建议的那样使用<div style='clear:both;'></div> ，而是建议明确说明<dt>元素的高度。 这样，浮动不必被清除。