Twitter bootstrap 3 Bootstrap 3模式-如何使用div填充剩余的正文内容而不重叠父内容？

我正在使用Bootstrap3 CSS和JQuery位置选择器在模式弹出窗口中处理位置选择器。通常，如果内容需要，Bootstrap3的模态体大小会扩展

我需要做的是强制model具有相对于屏幕大小的属性，因为初始DOM内容是空的，并且是通过JQuery（GoogleMaps初始化）填充的

问题是，当将相关div设置为具有

style=height:100%

时，body将其父级与其同级modal headers div的确切高度重叠

如何防止此类行为并使模态体填充自由空间而不与父零部件重叠

下面是一个工作示例

---

好的，经过一些咨询，我找到了解决方法/答案。 诀窍是威胁像table和table行这样的div。在添加了一些额外的样式之后，对话框看起来和它应该的完全一样

和css：

#location-picker .modal-content {
    display: table;
    width: 100%;
}

#location-picker .modal-dialog{
    width: 80%;
    height: 85%;
}

#location-picker .modal-body{
    height: 100%;
    display: table-row;
    width: 100%;
}
#location-picker .row{
    padding:15px;
}
.full-height{
    height: 100%;
}

---

不清楚你在尝试什么。我想，你想根据屏幕大小来降低对话框的高度吗？@GaneshKumar我想让对话框具有响应性。大约90%的高度。现在，我需要红色框从其父div（模式内容）中获取所有空间，并且不要像现在一样重叠它，但是父div现在没有任何空间，没有可用空间。看看这个答案：不使用JQuery。我有一个纯css的答案。