动态调整内部 div 的大小（引导模式）答案

【问题标题】：Dynamically re size inner div (bootstrap modal)动态调整内部 div 的大小（引导模式）
【发布时间】：2013-05-24 21:45:45
【问题描述】：

我有以下用于模态的 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;  
}

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

【问题讨论】：

这是一个盲目的猜测，但我知道我之前有一个可滚动的模态正文 - 尝试在正文中再添加一层div 标签，然后将您的搜索结果放在那里。跨度>
可能值得在某处放置一个小提琴或一个实时代码示例，以便我们可以看到这个操作？

标签： jquery css twitter-bootstrap

【解决方案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

【讨论】：