為什么動態生成的內容不會改變包含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>元素的高度。 這樣，浮動不必被清除。