Ich versuche, mithilfe des modalen Bootstrap 3-Dialogs eine Art reaktionsfähiges Megamenü zu erstellen. Ich möchte die Breite und Höhe des gesamten modalen Fensters auf 80% des Ansichtsfensters einstellen, während ich den modalen Körper auf eine maximale Höhe setze, um nicht den gesamten Bildschirm in großen Ansichtsfenstern auszufüllen.

Mein 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>

Mein CSS:

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

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

Dies funktioniert wie für die Breite vorgesehen, aber der Parameter "height" liefert kein Ergebnis. Auf diese Weise wird die Höhe des Modalfensters immer auf den Wert für die maximale Höhe festgelegt. Hat jemand eine Idee, wie man die Höhe dynamisch entsprechend der Höhe des Ansichtsfensters einstellt?