Bootstrap，模态max-heigh和max-width不起作用

Question

我有一个按钮，打开一个模式，里面有按钮所在div的内容。我试图让模态的最大高度和最大宽度都达到90％，所以如果它是一个地图，他们想要扩大它的整个高度和宽度，但如果它有几个复选框那么它将是很多小。我遇到的问题是，当我设置最大高度时，模态仍将超出屏幕的底部，当我设置最大宽度时，它只需要占据屏幕中心的25％。

HTML：

SELECT t1.ID, t2.Nn
FROM table1 t1, table2 t2
INNER JOIN table3;

CSS：

                    <div class="ibox-tools hidden-xs"><!--THE BUTTONS FOR THIS DIV THAT ARE HIDDEN WHEN THE SCREEN IS EXTRA SMALL-->
                    <div class="dropdown dropdownView"><!--THE DROPDOWN-->
                        <button class="btn btn-default dropdown-toggle btn-xs btn-purple" type="button" id="dropdownMenuElement" data-toggle="dropdown" aria-expanded="true"><!--DROPDOWN BUTTON-->
                            Views
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuElement"><!--DROPDOWN SELECTIONS-->
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#elementMap">Map</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#elementGrid">Table</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-green btn-xs" data-toggle="modal" data-target="#resetElementModal">Reset All</button><!--RESET BUTTON-->
                    <div class="modal fade" id="resetElementModal" role="dialog"><!--MODAL FOR ELEMENT-->
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header"><!--MODAL TITLE BAR-->
                                    <button type="button" class="close" data-dismiss="modal"><!--CLOSE BUTTON-->
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <h4 class="modal-title">Element Map</h4><!--MODAL TITLE-->
                                </div>
                                <div class="modal-body"><!--MODALS CONTENT-->
                                    <p>Are you sure you wish to reset the elements?</p>
                                </div>
                                <div class="modal-footer"><!--MODAL FOOTER WITH CLOSE BUTTON-->
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#enlargeElementModal"><!--BUTTON THAT MAKES THE DIV CONTENT OPEN UP IN A MODAL-->
                        <span class="glyphicon glyphicon-fullscreen"></span>
                    </button>
                    <div class="modal modal-wide fade" id="enlargeElementModal" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <h4 class="modal-title">Element Data</h4>
                                </div>
                                <div class="modal-body">
                                    <p></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="collapse-link"><!--COLLAPSES THE DIV-->
                        <i class="fa fa-chevron-up"></i><!--GLYPHICON-->
                    </a>
                </div>