[英]HTML <div> height not expanding with dynamic content
我在用動態內容填充HTML div時遇到問題。 當動態數據加載到div中時,其高度不會根據內容進行擴展。 動態內容的jQuery代碼為:
$('.width_3_quarter').append('<h2>Selected Groups</h2>');
for(var i=0; i<userGroups.length; i++)
{
var div=$('<div id="data"'+i+' style="display:block;">'+userGroups[i]+'</div> ');
$('.width_3_quarter').append(div);
}
var selCat=$('<div id="selectedCat"><span style="font-weight:bold; text-decoration:underline;">Groups Selected </span></div>');
var label=$('<label style="margin-top:-1px; margin-bottom:0px;position:absolute;font-weight:bold;text-decoration:underline;">Available Groups </label>');
var selectedData=$('<div id="myData"></div>');
var select=$('<select id="grpSelect" name="grpSelect" multiple="multiple"> </select>');
for(var i=0;i<listGroups.length; i++)
{
var option=$('<option value="'+listGroups[i]+'">'+listGroups[i]+'</option>');
select.append(option);
}
var button=$('<input type="button" value="submit" id="valSubmit" onclick="addGrp();"/>');
selCat.append(selectedData);
$('.width_3_quarter').append(label);
selCat.prepend(button);
$('.width_3_quarter').append(select);
$('.width_3_quarter').append(selCat);
在這里,數據是從帶有字符串值的靜態數組中加載的。
html div如下:
<div class="module width_3_quarter" style="clear:both;">
當我將靜態數據放入div時,它正在擴展以適合內容的大小。 但是,動態數據並非如此。 CSS是:
.width_3_quarter {
width: 73%;
margin-right: 0;
min-height: 462px;
font-weight: normal;
display: inline-block;
text-indent: 20px;
overflow: hidden;
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
line-height: 36px;
font-size: 18px;
}
如何控制div的高度以適合動態內容的大小?
而不是overflow:hidden
執行overflow:auto
嘗試將最小高度更改為100%:
min-height:100%;
那怎么辦
overflow: hidden;
overflow-y: auto;
根據經驗,您有時必須指定要溢出的軸
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.