WIE man Parallelen Spalten Divs mit Bootstrap hinzufügen/geben volle Höhe?

Question

Ich habe ein Problem beim Hinzufügen von 2 Divs parallel und geben ihnen eine volle Höhe.

Ich habe bereits die divs parallel, aber das Problem ist, wenn ich ihnen die volle height:100%; geben will passiert es nichts.

Welche Eigenschaften muss ich ändern, um dies zu ermöglichen?

Die Idee ist, eine Informationsseite zu haben, ohne x-Scrollbar und y-Scrollbar, nur ein Cover-Foto, geteilt

dies ist mein Code: https://jsfiddle.net/davidlerma87/3u8v01b4/2/

Well

Erste : Wie Sie sehen können, habe ich oben eine Menüleiste, die eigentlich nicht gut funktioniert.

Zweitens: Ich möchte unter 2 Parallelen Spalten mit voller Höhe

Drittens: dies auch für mobile ist.

Das Problem ist die Position der divs, die fehlausgerichtet sind Grüße und danke !!

Wieder kurze Erklärung, Bildschirm in zwei Spalten geteilt, aber mit voller Höhe einschließlich der oberen Menü

Answer 1

Bitte überprüfen Sie diese Geige , Habe ich notwendige Änderungen in css gemacht

html,body { height:100%; } 
body { 
    background: url("img/GProxpt.jpg") no-repeat center center fixed;; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding:0; 
    margin:0; 
    color:#f1f3f5; 
    font-family: "Courier New"; 
    font-size:14px; 
} 

.container-fluid { 
     background-color: rgba(0, 0, 0, 0.6); 
    /* position: absolute; */ 
    /* top: 0; */ 
    /* left: 0; */ 
    /* width: 100%; */ 
    height: 100%; 
    /* overflow: auto; */ 
} 

.icon-menu {  
    margin-top:20px; 
    margin-right:7em; 
    float:right; 
    cursor:pointer; 
    width:30px; 
    height:40px; 
} 

.icon-menu:hover { 
    width:35px; 
    height:45px; 
} 

.row-menu { background:red;  min-height: 100%;} 

.left-side { 
    width:100%; 
    height:100%; 
    padding-left:20px; 
    margin-top:7em; 
} 

.left-side .title { 
    color:#DCEA5F; 
    font-size:50px; 
} 

.left-side .title .sub-title { 
    font-size:35px; 
} 
.left-side .text-par { 
    padding-top:20px; 
    padding-right:0; 
    font-size:20px; 
} 

.cols { 
     /* position: absolute; */ 
    display: block; 
    min-height: 100vh; 
    margin-top: 20px; 
    float: left; 
} 

.outer-right-side { 
    position:relative; 
    background:#18232E; 
    margin-right:0; 
    margin-top:0; 
} 

.outer-left-side { 
    margin-bottom:0; 
    position:relative; 
    background:white; 
} 

https://jsfiddle.net/3u8v01b4/5/

Aktualisiert Geige: https://jsfiddle.net/51wwmvqx/ die Rollen entfernt und HTML-Struktur Änderungen vorgenommen.

Answer 2

Sie können dies versuchen:

.cols { 
    height: 100vh; 
}