У меня возникла проблема с заполнением HTML-раздела динамическим контентом. Когда динамические данные загружаются внутри 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 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
Как насчет этого?
overflow: hidden;
overflow-y: auto;
Из опыта вы должны указать ось, для которой вы хотите, чтобы переполнение работало иногда
:
( двоеточие ) вместо =
( равно ).
Попытайтесь изменить минимальную высоту до 100%:
min-height:100%;