添加新元素不会使 Twitter-Bootstraps 中的模态主体变大

Question

我有此代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">My title</h4>
            </div>
            <div class="modal-body">
                <div id="problem_desc">
                </div>
                <div id="problem_sol">
                </div>
            </div>
            <div class="modal-footer">
                <div id="modalbutton">
                </div>
            </div>
        </div>
    </div>
</div>

然后，我使用一些Ajax来填充Divs，类似的东西：

$('#problem_desc').html('<div class="form-group error">'+data.problem.problem_description+'</div>');

...

$('#problem_sol').html(<div class="form-group error"> <label for="probselect" 
class="col-sm-3 control-label">Something</label><div class="col-sm-9"> 
<select class="form-control" id="probselect"></select></div>);

我使用这些功能2或3次在模态

中形成表单

有几种情况，我想在模态中包含在模式中，具体取决于Ajax响应，因此我不能仅仅将表单放入模态并用Ajax填充。我需要动态创建表单。

我希望模态的身体会根据我添加的DIV和列的数量扩展或收缩。当我不动态添加它们时，这有效。

问题是，当添加jQuery时，它不会扩展或收缩，并且表格最终会在重叠的页脚中。

有什么建议？

Answer 1

i Overrode .modal-boty与此：

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

工作就像魅力。