jquery - 添加新元素不会使 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 来填充 div，像这样:

$('#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

我用这个覆盖了 .modal-body:

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

像魅力一样工作。