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

Question

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

我需要做的是强制模态与屏幕大小相关，因为初始DOM内容为空并且通过JQuery填充（Google地图初始化）。

问题是，当将相关div设置为style= height:100%时，正文将其父级与其兄弟模态标题div的确切高度重叠。

如何防止这种行为并使模态体填充自由空间而不重叠父组件？

这是一个有效的例子 https://jsfiddle.net/qfqjq82r/

Answer 1

在咨询后我找到了解决方法/答案。 诀窍是威胁表格和表格行等div。添加一些额外的样式后，对话框看起来应该是它应该的样子。

https://jsfiddle.net/qfqjq82r/7/

和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%;
}