jquery - 动态重新调整内部 div 的大小( Bootstrap 模式)

Question

我有以下用于模态的 HTML。当 seach-result-view 动态填充数据库中的内容(使用 ajax)时，它会离开页面。即 seach-result-view 中的内容离开页面并且变得不可滚动。我期望 Search-Result_div 可以滚动，因为它位于另一个 div (#Search_result) 中。

 <div id="search_result" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Search results</h3>
    </div>
    <div id="seach-result-view" class="modal-body">
    </div>

CSS 如下。

.modal {
 position: fixed;
 top: 10%;
 left: 40%;
 width:780px;
 z-index: 1050;
 margin-left: -280px;
 background-color: #ffffff;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, 0.3);
 *border: 1px solid #999;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
      border-radius: 6px;
 outline: none;
 -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
      background-clip: padding-box;
}

.modal-body {
 position: relative;
 max-height: 80%;
 padding: 15px;
 overflow-y: auto;  
}

我在这里做错了什么？感谢任何帮助:)

Answer 1

按照官方文档的建议实现模式。 modal-body里面div创建另一个 div说 <div id='results'> .

<div class='modal-body'>
  <div id='results'>
  </div>
</div>

在这个内部 div 中填充您的结果并添加此 css:

div#results 
{
 width:150px;
 height:150px;
 overflow:scroll;
}

这将确保固定高度和正文部分的模态将是可滚动的

您还应该看看:Twitter bootstrap scrollable modal