Почему динамически генерируемый контент не меняет высоту содержимого div?

Question

Я пишу div нижнего колонтитула, который отображает информацию из базы данных. Нижний колонтитул имеет цвет фона, отличный от остальной части страницы, и будет иметь высоту, которая зависит от того, сколько контента выбрасывает в него база данных. Когда я генерирую контент с помощью php и вызываю границу вокруг div нижнего колонтитула, контент появляется и, скажем, имеет высоту 400px, но граница 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>

Это то, что я получаю. Область под красной рамкой должна быть заполнена цветом. Граница изображения 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;
        }

edit: я использую Firefox на Mac

Answer 1

Проверьте CSS нижнего колонтитула ... если у вас есть переполнение, установленное на что-либо кроме auto / scroll, тогда DIV не будет расти.

Если вы не попробуете использовать что-то кроме DL / DT, так как DT являются встроенными элементами, они не будут подталкивать ваш div к содержанию. *

например. вместо этого попробуйте использовать DIV, если нижний колонтитул растет, у вас есть ответ.

(примечание: я пересмотрел порядок предложений)

* (Я точно понимаю, что это Не должно быть проблемой, но не было указания на то, в каких браузерах это происходило, поэтому я не удивлюсь Например, IE рендерился не так, как ожидалось)

Answer 2

Не видя CSS, я думаю, что ваши <dl> всплывают, чтобы получить их рядом. Содержащая <div> затем не будет расширяться, чтобы содержать их. Если это так, добавление clear:both; перед окончательным </div> должно исправить это, например:

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

Answer 3

Кстати, вы используете элемент <dl> неправильно: вам не хватает элемента <dd>. Элементы в списке определений всегда состоят из одного определения term и одного или нескольких определений (которые в вашем коде отсутствуют).

Кроме того, вместо того, чтобы использовать <div style='clear:both;'></div>, как предложил Стив, я бы предложил явно указать высоту ваших <dt> элементов. Таким образом, поплавки не нужно очищать.

Answer 4

Браузеру все равно, генерируется ли ваш контент PHP или из статического HTML-файла.

Скорее всего, проблема будет в вашем CSS. Либо содержимое, которое вы помещаете в нижний колонтитул, имеет свойства позиционирования (например, float: left или position: absolute), которые размещают их «за пределами» div, либо у div установлен фиксированный размер и / или свойства переполнения.

Я бы посоветовал разместить здесь свой CSS-файл или (если он слишком большой) разместить его где-нибудь, чтобы мы могли посмотреть. Готовый HTML (вы можете просто сохранить статическую копию вывода, если ваша система еще не подключена) также не повредит.