Bootstrap 4行填充剩余高度

Question

我努力使一排伸展以填补剩余的可用高度。我尝试将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>

codepen：https://codepen.io/ee92/pen/zjpjXW/?editors=1100

我想让蓝色行（ROW 2）填满所有红色空间。有什么建议吗？

由于

Answer 1

使用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: How to make the row stretch remaining height?

Answer 2

这是一个解决方案。包装器div必须具有h-100，适应高度的div必须具有flex-grow-1和溢出自动。这样，div将在其内容小于可用空间时增长为填充空间，并在其内容大于可用空间时显示滚动条。

Demo 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>                

Answer 3

如果有人厌倦了让它工作，这里有一个超级简单的解决方案，可以在大多数情况下使用。只需将以下类添加到您尝试填充剩余高度的 div 中： 请注意，100vh 是可见高度的 100%，200px 是上面剩余 div 的总固定高度。

.fillRemaining {
height: calc(100vh - 200px);
}