Bootstrap-4 Höhe 100 mit überfülltem Inhalt

Question

Dies ist eine weitere bootstrap h-100 Frage, aber es fügt einige Komplexität hinzu.

Ziel ist es, einen Bootstrap-Container mit einem Hintergrundbild zu haben, das drei Spalten enthält. Die linken und mittleren Spalten haben eine Hintergrundfarbe und sollten immer der Höhe des Containers entsprechen. Die mittlere Spalte enthält Text (der auf einem kleineren Bildschirm größer wird und die Höhe des Darstellungsbereichs überschreitet). Alles in allem sollte der Container in die Ansichtsfensterhöhe passen.

habe ich hier ein Beispiel: https://www.codeply.com/go/2iMM4dthOK

Derzeit verwende ich body{min-height: 100%}, die mit dem Laptop-Ansichtsfenster zu guten Ergebnissen führen. Wenn Sie jedoch zum Desktop-Ansichtsfenster wechseln, werden Sie feststellen, dass der Container nicht in das Ansichtsfenster passt. Dafür gibt es eine Lösung namens body{height: 100%}. Ja, gelöst! Nein noch nicht. Schalten Sie das Laptop-Ansichtsfenster um und Sie werden sehen, dass der Container jetzt nicht mit dem Inhalt des mittleren Balkens wächst.

Irgendwelche CSS Magier da draußen, die helfen können?

Bearbeiten Offensichtlich benötigt das Ansichtsfenster eine bestimmte Höhe, um das Problem zu beobachten. Ich teste gerade mit Desktop: 1440x780 und Laptop: 1200x780 Auflösungen.

Answer 1

Entfernen h-100 von allen div und Anzeige hinzufügen: flex add css gleich Zeile wie unten

css: 
.equal{ 
display:flex; 
} 
html: 
<div class="container-fluid"> 
     <div class="row equal"> 
      <div class="col-sm-3 col-left"> 
       col1 
      </div> 
      <div class="col-sm-3 col-middle"> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
      </div> 
      <div class="col-sm-6 col-right"> 
       col3 
      </div> 
     </div> 
    </div>