div 高度没有根据内容大小增长

Posted 2023-02-22

【中文标题】div 高度没有根据内容大小增长

【英文标题】：div height is not growing according to content size

【发布时间】：2013-01-18 21:07:05

【问题描述】：

嗨，我有一个动态内容 $search_results，我正试图在 <div> 中显示它。但问题是<div> 的高度没有根据内容大小增加。 $search_results 是类似<table><tr><td>Values</td></tr></table> 的表格内容

这是代码。

<div  style="background:#CCC;">
<div style="height:500px;width:1000px;margin:auto;padding-top:20px;">
<div style="width:200px;float:left; background:#666;color:white;">
<form name="SearchForm" action="" method="post">
<ul class="SearchList">
<li class="firstlist">Search</li>

<li>
   <input  type="text"  class="text_medium" value="Keywords" name="KeywordsTextBox" onblur="if(this.value=='') this.value='Keywords'" onFocus="if(this.value =='Keywords' ) this.value=''" >
</li>

<li>
  <select name="SearchValues" class="select_medium">
     <option value="Search1">Search option 1</option>
     <option value="Search1">Search option 2</option>
     <option value="Search1">Search option 3</option>
     <option value="Search1">Search option 4</option>
  </select>
</li>

  <input type='submit' name='SearchButton' class='Small_Button'  value='Search'>
</li>

</ul>
</form>
</div>
<div style="width:800px;float:right; background:#C69;">
<form name="ResultForm" method="post" action="">
<?php 

//$serachObj =  new Search()

//$search_results = $serachObj->search();

echo $search_results; 
?>
</form>
</div>
</div>
</div>

我试过style="min-height:500px;" 但它不起作用。有什么建议 ？。

【参考方案1】：

你的孩子DIV's中有float。所以，你必须清除它的父母。将 overflow:hidden 定义为父 DIV。比如这样写：

<div style="overflow:hidden;min-height:500;width:1000px;margin:auto;padding-top:20px;">
 <div style="float:left"></div>
 <div style="float:left"></div>
</div>

更新

<div style="min-height:500;width:1000px;margin:auto;padding-top:20px;">
     <div style="float:left"></div>
     <div style="float:left"></div>
     <div style="clear:both"></div>
</div>

【讨论】：

在哪个div上还是需要新建..？

检查更新的答案。阅读本文了解更多信息css-tricks.com/the-how-and-why-of-clearing-floats

但我认为 min-height 不起作用..当我现在搜索它时。

【参考方案2】：

将overflow:auto添加到父div

DEMO

【参考方案3】：

将 div 高度设为自动。

height:auto;

【讨论】：