Высота HTML <div> не увеличивается с динамическим содержимым

0

У меня возникла проблема с заполнением 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;


}

Изображение 174551

Как я могу управлять своей высотой div, чтобы соответствовать размеру динамического контента?

  • 2
    jsfiddle пожалуйста ...
  • 0
    да, пожалуйста, создайте jsfiddle
Показать ещё 1 комментарий

3 ответа

1

вместо overflow:hidden делают overflow:auto

  • 0
    Это не сработало, приятель. Теперь полоса прокрутки входит в мой div.
0

Как насчет этого?

overflow: hidden;
overflow-y: auto;

Из опыта вы должны указать ось, для которой вы хотите, чтобы переполнение работало иногда

  • 0
    Он также показывает полосу прокрутки, когда данные превышают указанную минимальную высоту.
  • 0
    если это CSS, должно быть : ( двоеточие ) вместо = ( равно ).
Показать ещё 3 комментария
0

Попытайтесь изменить минимальную высоту до 100%:

min-height:100%;
  • 0
    Не могу этого сделать. Мой div изначально пуст. Делая это покажет мой div высота до 100%. Я хочу, чтобы он изначально был ростом 462 пикселей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню