bootstrap 3 模态框 modal-body 高度用百分比不起效果

使用百分比设置模态框的高度时可能会出现问题，因为模态框的高度是由其内容的高度决定的。但可以使用 JavaScript 动态设置模态框的高度。

例如，可以在模态框的 `shown.bs.modal` 事件中，获取模态框的高度和内容区域的高度，然后将模态框的高度设置为内容区域的高度加上一定的空白间距，例如：

$('#myModal').on('shown.bs.modal', function () {
  var modalHeight = $(this).outerHeight();
  var bodyHeight = $(this).find('.modal-body').outerHeight();
  var extraHeight = modalHeight - bodyHeight;
  var newHeight = bodyHeight + extraHeight * 0.8; // 设置为内容高度加上80%的空白间距
  $(this).find('.modal-content').css('height', newHeight);
});

这样就可以动态设置模态框的高度，使其适应内容的高度。

相关问题

bootstrap 3 模态框 modal-body能用百分比吗

在 Bootstrap 3 模态框中，`modal-body` 的高度默认是根据内容自适应的，如果需要使用百分比设置 `modal-body` 的高度，可以通过以下方法实现：

1. 在 CSS 样式中给 `.modal-body` 添加 `height` 属性和 `overflow-y` 属性，例如：

.modal-body {
    height: 60%;
    overflow-y: auto;
}

2. 将 `height` 的值设置成所需百分比，这样可以设置模态框内容区域的高度，并且当内容超出高度时会出现滚动条。

以下是一个示例代码：

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Title</h4>
            </div>
            <div class="modal-body" style="height: 60%; overflow-y: auto;">
                <!-- Modal Body Content -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

通过以上方法，你可以在 Bootstrap 3 模态框中使用百分比设置 `modal-body` 的高度，并且可以控制滚动条的显示。

动态设置modal-body高度

在 Bootstrap 3 的模态框中，可以通过 JavaScript 动态设置 modal-body 的高度。具体的实现方法如下：

1. 首先，为 modal-body 设置一个固定的最大高度，例如：

.modal-body {
  max-height: 400px;
  overflow-y: auto;
}

这里设置了最大高度为 400px，当 modal-body 的内容超过 400px 时，modal-body 就会出现滚动条。

2. 在 JavaScript 中获取 modal-body 的高度和模态框的高度，然后计算出 modal-body 的实际高度，例如：

var modalBody = document.querySelector('.modal-body');
var modalDialog = document.querySelector('.modal-dialog');
var modalHeight = modalDialog.clientHeight - 60; // 60 是 modal-body 的 padding-top 和 padding-bottom 之和
var modalBodyHeight = Math.min(modalBody.scrollHeight, modalHeight);

这里首先获取了 modal-body 和 modal-dialog 的元素，然后通过 clientHeight 属性获取了 modal-dialog 的高度，并减去了 modal-body 的 padding-top 和 padding-bottom 的值，得到了 modal-body 可用的高度。然后通过 scrollHeight 属性获取了 modal-body 的内容实际高度，使用 Math.min 方法将这两个高度的较小值作为 modal-body 的高度。

3. 最后，将计算出来的 modal-body 高度赋值给 modal-body 的样式中：

modalBody.style.height = modalBodyHeight + 'px';

这样就可以动态设置 modal-body 的高度了。完整的 JavaScript 代码如下：

var modalBody = document.querySelector('.modal-body');
var modalDialog = document.querySelector('.modal-dialog');
var modalHeight = modalDialog.clientHeight - 60;
var modalBodyHeight = Math.min(modalBody.scrollHeight, modalHeight);
modalBody.style.height = modalBodyHeight + 'px';