Div 100% Länge Deformat Bootstrap Modal Dialog

in meinem Design muss ich 3 Balken über den gesamten Bildschirm haben wie auf dem Bild gezeigt. I v dass durch diesen Code verwaltet Div 100% Länge Deformat Bootstrap Modal Dialog

div {height:94%;} 
#yellowDiv {height:100%;} 
#lightGreenDiv {height:100%;} 
#darkGreenDiv{height:100%;} 
body, html { height:100% }

Und das hat super funktioniert, bis ich Bootstrap-modal platziert. Da div 94% es deformat Bootstrap-Dialog wie auf Bild unten:

Jetzt, wenn ich div Länge 94% entfernen, Bootstrap Modal ist nicht deformiert und Elemente sind nicht außerhalb der Grenze gehen, aber meine Hauptseite Design ist gebrochen.

Blick der modalen Form nach entfernten div Höhe 94%

Und das ist, wie Haupt-Seite nach entfernten div 94% Höhe

Meine Frage ist, sieht wie div Höhe einstellen über ganze Seite zu sein wie auf dem ersten Bild aber nicht Bootstrap-Dialog modal beeinflussen?

Quelle

2016-06-29 Marino Milak

Sie sollten Ihren Code in einer Geige oder Schnipsel bereitstellen! –

Ich weiß, dass das Problem in div Höhe 94% ist, aber ich weiß nicht, wie es zu lösen und meine App ist groß, so dass ich nicht Code hochladen, nur Bilder. –

Hast du irgendeine Position in deinen Divs benutzt? Wenn Sie also keine feste oder absolute Position festlegen, wird die Höhe nicht 100% betragen? –

Paar von Ideen.

Statt die 94% der Höhe des Auftragens <div> es auf eine Klasse wie .divHeight: 94% und fügen Sie dann nur class="divHeight" zum <div> Sie verändern möchten. Im Moment bewerben Sie 94% auf alle <div> auf Ihrer Website.

Wenn diese grünen Balken als Hintergrund für Ihre Website dienen sollen, verwenden Sie einfach Verläufe. Der folgende Code zu sagen angewendet ... Ihr body oder html Element die gleiche Wirkung erreichen würde, während die Notwendigkeit für Ihre 3 <div> Elemente vollständig (vorbehaltlich natürlich Browser-Kompatibilität) Weglassen:

.gradient-bg { 
    background: rgba(196, 224, 97, 1); 
    background: -moz-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(196, 224, 97, 1)), color-stop(33%, rgba(196, 224, 97, 1)), color-stop(33%, rgba(110, 178, 87, 1)), color-stop(66%, rgba(110, 178, 87, 1)), color-stop(66%, rgba(0, 155, 67, 1)), color-stop(100%, rgba(0, 155, 67, 1))); 
    background: -webkit-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); 
    background: -o-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); 
    background: -ms-linear-gradient(left, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); 
    background: linear-gradient(to right, rgba(196, 224, 97, 1) 0%, rgba(196, 224, 97, 1) 33%, rgba(110, 178, 87, 1) 33%, rgba(110, 178, 87, 1) 66%, rgba(0, 155, 67, 1) 66%, rgba(0, 155, 67, 1) 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c4e061', endColorstr='#009b43', GradientType=1); 
}

Example

Quelle

2016-06-29 13:54:27

Diese 3 Balken wirken wie 3 verschiedene Tasten, so dass es nicht gradient sein kann. Können Sie bitte Codebeispiel mit Lösung 1 buchen? –

Ich habe das folgende Beispiel für CodePen erstellt, das drei 'div' Elemente in einem' div' Wrapper verwendet. Jedes Kind 'div' löst ein separates Modal aus: http://codepen.io/rkieru/pen/oLZVWX –

Div 100% Länge Deformat Bootstrap Modal Dialog

Antwort

Verwandte Themen