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

我正在编写一个页脚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>

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