it-swarm.com.de

Wie beschränke ich die Höhe des Modals?

Ich suche nach einer Möglichkeit, ein modales Dialogfeld innerhalb der Bildschirmgrenzen zu halten, d. H. Dass seine Höhe immer geringer als die Bildschirmhöhe ist und die Breite entsprechend angepasst wird. Ich habe es versucht:

.modal-dialog {
  max-height: 100%;
}

aber das scheint keine Wirkung zu haben.

http://jsfiddle.net/ma4zn5gv/

Eine Illustration:

enter image description here

Ich bevorzuge eine reine CSS-Lösung (keine js), falls vorhanden. Der Klarheit halber suche ich nach maximaler Höhe und nicht nach Höhe (d. H. Ist der Modal nicht größer als der Bildschirm, lassen Sie ihn so wie er ist).

24
georg

Verwenden Sie viewport units mit calc. So was:

.img-responsive {
    max-height: calc(100vh - 225px);
}

... wobei der 225px der Gesamthöhe der oberen und unteren Bereiche des Ansichtsfensters entspricht, die den Dialog umgeben.

Um auf die Breite des Modals zu achten, müssen wir einige weitere Eigenschaften festlegen:

.modal {
    text-align:center;
}
.modal-dialog {
    display: inline-block;
    width: auto;
}

Aktualisiert Fiddle (Ändern Sie die Höhe des Ansichtsfensters, um den Effekt zu sehen.)


Alternative:

Wir können calc durch eine Auffüll- + negative Randtechnik ersetzen:

.img-responsive {
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;
}

GEIGE

PS: Browser-Unterstützung für Viewport-Einheiten ist sehr gut

51
Danield

Da der Standardwert auf auto und in Breite und Höhe auf 100% gesetzt ist. Sie können nur ändern; Das Bild im Viewport und die Ziel-ID wie folgt:

/*let target has the same value as modal-dialog*/
#myModal {
    width:auto;
    height:auto;
    margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
    width:70%;
    height:70%;
    margin:0 auto;
}

Hier ist die DEMO in jsfiddle.

Sie können es auch wie folgt trennen:

.modal-dialog img {
    width:100%;
    height:100%;
    margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
    width:60%;
    height:60%;
    margin:0 auto;
}

AKTUALISIERT DEMO:

3
Herman Nz

Wenn Sie sicherstellen, dass für die übergeordneten Elemente eine Höhe festgelegt ist, sollten Sie dies in der Lage sein, dies ganz einfach zu tun. Ich habe der Kopf- und Fußzeile 10 Prozent Höhen und die Karosserie 80 Prozent gegeben, so dass sich alles auf 100 summiert :)

.modal, .modal-dialog, .modal-content{
  height: 100%;

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}
2
Achilles

Skript

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});

Fiddle

2

Versuchen Sie, Fiddle mit einigen css - Änderungen zu bearbeiten.

css:

.modal-dialog {
 height: 100%;
 margin: 0;
 padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
1
Amit

Wenn Sie max-height und max-width auf 100% setzen, wird der Bildschirm automatisch entsprechend angepasst. Wenn Sie jedoch die Größe des Dialogfelds verkleinern möchten, müssen Sie max-height und max-width auf einen bestimmten Wert setzen. Da Sie bereits das responsive Model-Dialogfeld verwendet haben, ändert sich die Dialoggröße automatisch entsprechend der Bildschirmgröße. 

Versuchen Sie, css zu folgen, es funktioniert möglicherweise entsprechend Ihrer Anforderung. Sie können die maximale Höhe und die maximale Breite entsprechend ändern. Der linke Rand und der rechte Rand werden für die Mittelausrichtung verwendet.

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

Ich hoffe es kann dir helfen. !!

1
Ranjitsinh

Richten Sie den modal-body und nicht den modal-dialog aus.

Fügen Sie Ihrem CSS Folgendes hinzu:

max-height: 80vh;
overflow-y: auto;

Es sollte so aussehen:

.modal-body {
    max-height: 80vh; overflow-y: auto;
}

Stellen Sie die VH-Höhe nach Wunsch ein. 

1
Juan J

Legen Sie zuerst die Containergröße fest und stellen Sie dann die Größe des Modal-Dialogs ein.

Zum Beispiel:

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

Fiddle

1
Kanti

Ich denke, Sie sollten overflow verwenden: im .modal-Dialog ausgeblendet, mit einem Stil, um den Bildanteil zu erhalten.

0
David Vartanian