부트 스트랩 -4 높이가 100 이상입니다.

Question

이것은 또 다른 부트 스트랩 h-100 질문이지만 다소 복잡합니다.

목표는 세 개의 열을 포함하는 배경 이미지가있는 부트 스트랩 컨테이너를 갖는 것입니다. 왼쪽 및 가운데 col은 배경색 세트가 있으며 항상 컨테이너 높이에 맞아야합니다. 중간 열에는 텍스트가 포함되어 있습니다 (작은 화면에서 커지고 뷰포트 높이를 초과 함). 모든 컨테이너가 모두 뷰포트 높이에 맞아야합니다.

은 여기 예제를 만들어 :

https://www.codeply.com/go/2iMM4dthOK가 현재 나는 노트북 뷰포트 좋은 결과로 연결 body{min-height: 100%}를 사용합니다. 그러나 데스크탑 뷰포트로 전환하면 컨테이너가 뷰포트에 맞지 않습니다. body{height: 100%}이라는 솔루션이 있습니다. 예, 해결되었습니다! 아니, 아직. 랩톱 뷰포트를 다시 전환하면 컨테이너가 가운데 열의 내용으로 커지지 않음을 알 수 있습니다.

CSS 마술사가 도와 줄 수 있습니까?

분명히 뷰포트는 문제를 관찰하기 위해 특정 높이가 필요합니다. 저는 현재 데스크탑에서 테스트 중입니다 : 1440x780 및 노트북 : 1200x780 해상도.

Answer 1

제거 H-100의 모든 사업부에서 표시를 추가 : 동일한 추가 CSS를 그렇게 https://www.codeply.com/go/EtfQ4Jaxmr처럼

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>