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

Question

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

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

редактировать: Я использую Firefox на макинтоше

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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