Wie die Höhe von Modal in einem responsiven Design zu begrenzen, ohne Überlauf versteckt zu verwenden?

-1

Offenbar Bootstrap modale Ansichtshöhe reagieren nicht. [Probe kann hier gefunden werden] (http://getbootstrap.com/javascript/#modals) Ich möchte, dass meine modale Höhe kleiner je nach Größe der Gerätegröße des Benutzers wird. Wie kann ich es ohne zu erreichenWie die Höhe von Modal in einem responsiven Design zu begrenzen, ohne Überlauf versteckt zu verwenden?

erreichen, was scheint, schneidet den modalen Inhalt ab. Ich will nicht, weder overflow-y: scroll;

@media (min-width: 900px) { 
 
    .my-dialog .modal-dialog { 
 
     width: 900px; 
 
     max-height: 750px; 
 
     overflow: hidden; 
 
    } 
 
}

Quelle

2016-10-15 user6870671

Was möchten Sie mit dem Inhalt machen, wenn Sie ihn nicht versteckt oder scrollbar möchten? Wie möchten Sie, dass Benutzer Inhalte über die Höhe des Modal hinaus sehen können? – BSMP

Ich habe 'overflow-y: scroll;' definiert durch andere Div. Wenn der Inhalt zu groß ist, wird die horizontale Bildlaufleiste angezeigt. Daher möchte ich keine zusätzliche Bildlaufleiste in meiner @media hinzufügen. – user6870671

Ich weiß nicht, verwenden, wenn Sie jemals die CSS Längeneinheiten vh gehört haben, vw, vmin, vmax. Sie könnten die Lösung für Ihr Problem sein.

Von <length> - CSS | MDN aus dem Mozilla Developer Network:

1vw = 1% der Breite des Ansichtsfensters.
1vh = 1% der Höhe des Ansichtsfensters.
= 1% des Mindestwerts zwischen der Höhe und der Breite des Ansichtsfensters.
1vmax = 1% des Maximalwerts zwischen der Höhe und der Breite des Ansichtsfensters.

In Ihrem Fall, was Sie suchen, ist die Einheit vh.

Sie können jedoch die browser support table for the viewport units überprüfen.

Quelle

2016-10-15 09:30:52 louisfischer

Wie die Höhe von Modal in einem responsiven Design zu begrenzen, ohne Überlauf versteckt zu verwenden?

Antwort

Verwandte Themen