Почему динамически сгенерированный контент не меняет высоту содержащего div?
Я пишу нижний колонтитул, который отображает информацию из базы данных. Нижний колонтитул имеет другой цвет фона, чем остальная часть страницы, и будет иметь высоту, зависящую от того, сколько контента бросает в него база данных. Когда я генерирую контент с помощью php и вызываю границу вокруг div нижнего колонтитула, содержимое появляется и, скажем, имеет высоту 400 пикселей, но граница div отображается как прямоугольник высотой 1 пиксель в верхней части 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;
}
изменить: я использую firefox на Mac
Ответы 4
Проверьте свой CSS нижнего колонтитула ... если у вас установлено любое значение переполнения, кроме авто / прокрутки, то DIV не будет расти.
Если не попробовать использовать что-то другое, кроме DL / DT, поскольку DT являются встроенными элементами, они не будут подталкивать ваш div к содержимому. *
например просто попробуйте вместо этого использовать DIV, если нижний колонтитул растет, у вас есть свой ответ.
(примечание: я изменил порядок предложений)
* (Я понимаю, что этот Не должен может быть проблемой, но не было указаний на то, в каких браузерах это происходит, поэтому я бы совсем не удивился, если IE рендеринг отличается от ожидаемого, например)
Почему встроенные элементы не увеличивают размер div? Если нет CSS для размещения всего или div не имеет настроек переполнения, как вы говорите, dl / dt / dd должно быть в порядке.
Как только я установил автоматическое переполнение, нижний колонтитул расширится и появится цвет фона. Я тоже не настраивал DL / DT. Спасибо!
Извините, но это полная чушь. Стивемегсон дал правильный ответ. Установка overflow здесь неверна, и замечание о том, что dt не растут в коробке, совершенно неуместно.
Возможно, я поспешил ответить здесь, не зная достаточно о коде. Вероятно, виноват CSS, но были и другие неизвестные. Я должен был поменять местами параметры a / b ... проверить CSS, если все в порядке, проверить, что элементы работают.
Настройка переполнения - отличный способ расширить контейнер, чтобы в нем содержались его плавающие дочерние элементы, как описано, например, в quirksmode.org/blog/archives/2005/03/clearing_floats.html
@Gareth: правда, я даже сказал это в stackoverflow.com/questions/218760#218809. Я был просто сбит с толку, потому что в контексте ответа этот совет был ложным. В качестве решения, вероятно, здесь это работает.
Браузеру безразлично, создается ли ваш контент PHP или исходит из статического HTML-файла.
Скорее всего, проблема будет в вашем CSS. Либо содержимое, которое вы помещаете в нижний колонтитул, имеет свойства позиционирования (например, float: left или position: absolute), которые помещают их «вне» div, либо div имеет фиксированный размер и / или свойства переполнения.
Я бы посоветовал разместить здесь свой CSS-файл или (если он слишком большой) разместить его где-нибудь, чтобы мы могли его посмотреть. Готовый HTML-код (вы можете просто сохранить статическую копию вывода, если ваша система еще не в сети) тоже не повредит.
Не видя CSS, я предполагаю, что ваши <dl> плавают, чтобы расположить их бок о бок. Тогда содержащий <div> не будет расширяться, чтобы содержать их. Если это так, добавление clear:both; перед окончательным </div> должно исправить это, например:
<div style='clear:both;'></div>
Это работает так же хорошо, как и настройка overflow: auto; в нижнем колонтитуле div
Кстати, вы неправильно используете элемент <dl>: вам не хватает элемента <dd>. Элементы в списке определений всегда состоят из одного определения срок и одного или нескольких определения (которые в вашем коде отсутствуют).
Кроме того, вместо использования <div style='clear:both;'></div>, как предлагает Стив, я бы предложил явно указать высоту ваших элементов <dt>. Таким образом, поплавки не нужно очищать.
вы должны показать CSS, где вы применяете стиль, чтобы мы могли видеть, есть ли проблема, поскольку она, вероятно, будет