HTML <div> 高度不随动态内容扩展

Question

I am having problem with populating an HTML div with dynamic content. When dynamic data loads inside the div, its height is not expanding to fit the content. The jquery code for dynamic content is:

$('.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);

Here, the data is getting loaded from a static array with string values.

The html div is as:

<div class="module width_3_quarter" style="clear:both;">

When I put static data inside the div, it is expanding to fit the size of the content. However, its not the case with dynamic data. The CSS is:

.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;


}

How can I control my div's height to fit the size of the dynamic content?

Answer 1

而不是overflow:hidden执行overflow:auto

Answer 2

尝试将最小高度更改为100％：

min-height:100%;

Answer 3

What about doing this

overflow: hidden;
overflow-y: auto;

From experience you have to specify the axis you want overflow to work on sometimes