Próbuję stworzyć rodzaj responsywnego megamenu przy użyciu modalnego okna dialogowego Bootstrap 3. Chciałbym ustawić szerokość i wysokość całego okna modalnego na 80% rzutni, ustawiając ciało modalne na maksymalną wysokość, aby nie zapełniać całego ekranu na dużych rzutniach.

Mój 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>

Mój CSS:

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

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

Działa to zgodnie z przeznaczeniem dla szerokości, ale parametr „wysokość” nie daje żadnego wyniku. W ten sposób wysokość okna modalnego jest zawsze ustawiona na wartość maksymalnej wysokości. Czy ktoś ma pomysł, jak dynamicznie ustawić wysokość zgodnie z wysokością rzutni?