Bootstrap 4 строки заполнения оставшейся высоты - PullRequest
Новая
       32

Bootstrap 4 строки заполнения оставшейся высоты

0 голосов
/ 10 мая 2018

Я изо всех сил стараюсь растянуть ряд, чтобы заполнить оставшуюся часть доступной высоты. Я попытался добавить h-100 к классу строк, но это приводит к появлению пробела в нижней части экрана. Должен быть способ сделать это, но я полностью озадачен .. Вот мой код: 

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

кодовая ручка: https://codepen.io/ee92/pen/zjpjXW/?editors=1100

enter image description here

Я бы хотел, чтобы синий ряд (строка 2) заполнил все красное пространство. Есть предложения?

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 августа 2019

Это решение. Обертка div должна иметь h-100, div, которая адаптируется к высоте, должна иметь flex-grow-1 и overflow-auto. Таким образом, div будет увеличиваться, заполняя пространство, когда его содержимое меньше доступного пространства, и будет отображать полосу прокрутки, когда его содержимое превышает доступное пространство.

Демо jsfiddle 

<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">        
    <div class="text-white p-0" style="height:50px">HEADER</div>
</div>

<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">

        <div>Item1</div>
        <div>Item2</div>
        INNER text 1<br>
        INNER text 2<br>

</div>

<div class="flex-column justify-content-center bg-darkblue px-2">
    <div class="text-white p-0" style="height:50px">FOOTER</div>
</div>

0 голосов
/ 10 мая 2018

Используйте Bootstrap 4.1 flex-grow-1 класс ...

https://codepen.io/anon/pen/RyQvmW?editors=1100

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Похожие: Bootstrap 4: Как заставить строку растянуть оставшуюся высоту?

...