相关疑难解决方法(0)

我正在尝试使用Bootstrap 3模态对话框创建一种响应式megamenu.我想将整个模态窗口的宽度和高度设置为视口的80%,同时将模态体设置为最大高度,以便不在大视口上填充整个屏幕.

我的HTML:

    <div class="modal fade">
            <div class="modal-dialog modal-megamenu">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title">Modal Mega Menu Test</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary">close</button>
                    </div>
             </div>
        </div>

我的CSS:

.modal-megamenu {
    width:80%;
    height:80%;
}

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

这适用于宽度,但"height"参数不会给出任何结果.像这样,模态窗口的高度始终设置为max-height值.有没有人知道如何根据视口高度动态设置高度？

我有一个自定义大小(80%高度宽)引导模态体,它滚动(身体内容将在某些大小的屏幕上溢出)

有两个问题:

1. 我不能将max-height设置为100%,因为它将是整个文档的100%而不是容器的最大高度,这是我需要滚动才能正常工作.
2. 如果在最后一个模态体内有一个固定高度的div,如果屏幕对于内容不够大,它将溢出模态之外.

我该如何解决这个问题？我目前正在试验负利润,但我不太熟悉它.

JavaScript解决方案是可以接受的(jQuery可以作为backbone.js使用)

谢谢

编辑:提供截图

编辑2:更多截图