Question

Bootstrap Modal上有两个输入，它们按dropdownlist值显示/隐藏。我隐藏了模态的滚动条，并希望在下拉列表的所选索引发生变化时自动增加/减小其高度。虽然我尝试在模态的每个div中使用＆＃34; height：auto！important;＆＃34; ，但它不能自动更改（但在设置高度时会更改）作为像素值）。那么，是否可以自动执行此操作？

<style>
    .modal {        
        overflow-y: hidden !important;
        max-height: 100%;
    }
</style>



<!-- /.modal -->
<div id='accountModal' class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-body">
        <div id='accountModalContainer' class="modal-dialog" 
            style="width:600px !important; max-height:1000px; height:auto !important;">
        </div>
    </div>
</div>                    
<!-- /.modal -->

Answer 1

以下是遇到同样问题的人的解决方案：

<style>
.modal {
    position: absolute;
    display: table; /* This is the most important feature */
    overflow-y: hidden !important;
    width:100%; 
}
</style>

有关更多信息，请参阅Amit Shah在this页面上的答案。

Answer 2

请看这个。

我对.modal-body类进行了一些调整，增加了css。

.modal-dialog {
    width: auto;
}
.modal-body {
    max-height: calc(100vh - 225px);
    overflow: auto;
}

http://jsfiddle.net/ma4zn5gv/178/

自动设置高度，而不是在Bootstrap Modal中显示滚动条

2 个答案: