[英]Why doesn't dynamically generated content change the height of containing div?
I am writing a footer div that displays info from the database. 我正在编写一个显示数据库信息的页脚div。 The footer has a different background color than the rest of the page, and will have a height that depends on how much content the database throws to it.
页脚具有与页面其余部分不同的背景颜色,并且其高度取决于数据库向其投入的内容量。 When I generate the content with php and call for a border around the footer div, the content appears and is, let's say, 400px high, but the div border appears as a 1px high rectangle at the top of the div.
当我使用php生成内容并调用页脚div周围的边框时,内容会出现,比如400px高,但div边框在div的顶部显示为1px高的矩形。
How do I get the height to auto-fit the content? 如何获得自动调整内容的高度?
<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>
This is what I get. 这就是我得到的。 The area below the red border should be filled with a color.
红色边框下方的区域应填充颜色。 border image http://www.kevtrout.com/tortus/div.png
边界图片http://www.kevtrout.com/tortus/div.png
By popular demand, here is the css: 根据大众需求,这里是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: I am using firefox on a mac 编辑:我在mac上使用firefox
Check your footer CSS... if you have overflow set to anything but auto/scroll, then the DIV won't grow. 检查您的页脚CSS ...如果您将溢出设置为除自动/滚动之外的任何内容,则DIV将不会增长。
If not try using something other than DL/DT since DT's are inline elements, they won't push your div to fit content.* 如果不尝试使用DL / DT以外的东西,因为DT是内联元素,它们不会推动你的div适合内容。*
eg just try using a DIV instead, if the footer grows, you have your answer. 例如,只是尝试使用DIV,如果页脚增长,你有答案。
(note: I revised order of suggestions) (注意:我修改了建议的顺序)
*(I realize spec-wise, that this Shouldn't be an issue, but there wasn't an indication of which browsers this was occuring in, thus I would not be at all surprised if IE was rendering differently than expected for example) *(我意识到,这应该不是一个问题,但是没有迹象表明这种情况发生在哪个浏览器中,因此如果IE的渲染方式与预期不同,我也不会感到惊讶)
Without seeing the CSS, my guess would be that your <dl>
s are floated to get them side-by-side. 在没有看到CSS的情况下,我的猜测是你的
<dl>
被浮动以使它们并排。 The containing <div>
then won't expand to contain them. 然后包含
<div>
将不会展开以包含它们。 If this is the case adding a clear:both;
如果是这种情况则添加一个
clear:both;
before the final </div>
should fix it, like this: 在最终
</div>
应该修复它,如下所示:
<div style='clear:both;'></div>
The browser doesn't care if your content is generated by PHP or comes from a static HTML file. 浏览器不关心您的内容是由PHP生成还是来自静态HTML文件。
The issue will most likely be in your CSS. 问题很可能出在你的CSS中。 Either the content you put in the footer has positioning properties (like float:left or position:absolute) that place them "outside" the div or the div has a fixed size and/or overflow properties set.
放在页脚中的内容具有定位属性(如float:left或position:absolute),它们将它们放在div的“外部”,或者div具有固定大小和/或溢出属性集。
I'd suggest posting your CSS file here or (if it's too large) put it up somewhere where we can take a look. 我建议你在这里发布你的CSS文件或者(如果它太大)把它放在我们可以看看的地方。 The finished HTML (you could just save a static copy of the output if your system isn't online yet) wouldn't hurt either.
完成的HTML(如果您的系统还没有在线,您可以保存输出的静态副本)也不会受到影响。
By the way, your use of the <dl>
element is wrong: you are missing the <dd>
element. 顺便说一下,你使用
<dl>
元素是错误的:你缺少<dd>
元素。 Items in the definition list always consist of one definition term and one or more definitions (which, in your code, are missing). 定义列表中的项目始终包含一个定义术语和一个或多个定义 (在您的代码中缺少这些定义 )。
Also, rather than using <div style='clear:both;'></div>
as suggested by Steve, I'd suggest explicitly stating the height of your <dt>
elements. 另外,不是像Steve建议的那样使用
<div style='clear:both;'></div>
,而是建议明确说明<dt>
元素的高度。 This way, the floats don't have to be cleared. 这样,浮动不必被清除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.