Come mettere la barra di scorrimento solo per il modal-body?

Ho il seguente elemento:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div>

Mostra il dialogo modale qualcosa come questo, fondamentalmente, mette la barra di scorrimento intorno all'intero modal-dialog e non il modal-body che contiene il contenuto che sto cercando di visualizzare.

L'immagine ha un aspetto simile a questo:

Come posso ottenere una barra di scorrimento solo intorno a modal-body?

Ho provato ad assegnare style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"a modal-body ma non funziona.

Alexander Abakumov
Domanda modificata 12º giugno 2019 в 5:28
Programmazione
css twitter-bootstrap
16º settembre 2014 в 4:30
Non ci sono ancora visualizzazioni
Soluzione

Devi impostare la height del .modal-body e dargli overflow-y: auto. Ripristina anche il valore di overflow di .modal-dialog a initial.

Vedi l'esempio di lavoro:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}
Commentari (12)

Se stai supportando solo IE 9 o superiore, puoi usare questo CSS che scalerà dolcemente alle dimensioni della finestra. Potresti aver bisogno di modificare i "200px" però, a seconda dell'altezza del tuo header o footer.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
Commentari (3)

Aggiungendo a Carlos Calla'ottima risposta.

L'altezza di .modal-body deve essere impostata, MA puoi usare le media queries per assicurarti che sia appropriata alla dimensione dello schermo.

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

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}
Community
Risposta modificata 23º maggio 2017 в 12:10
Commentari (2)