Bootstrap 4行填充剩余高度

Posted 2023-02-16

【中文标题】Bootstrap 4行填充剩余高度

【英文标题】：Bootstrap 4 row fill remaining height

【发布时间】：2018-10-20 02:40:45

【问题描述】：

我正在努力使一行伸展以填充剩余的可用高度。我尝试将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) 填满所有红色空间。有什么建议吗？

谢谢

【参考方案1】：

使用Bootstrap 4.1 flex-grow-1 类...

https://codeply.com/go/Iyjsd8djnz

html,bodyheight:100%;

.bg-purple 
  background: rgb(48,0,50);

.bg-gray 
  background: rgb(74,74,74);

.bg-blue 
  background: rgb(50,101,196);

.bg-red 
  background: rgb(196,50,53);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

更新 4.3.1：另一个使用 vh-100 实用程序类的示例

https://codeply.com/go/h3bZbM6eSS

.bg-purple 
  background: rgb(48,0,50);

.bg-gray 
  background: rgb(74,74,74);

.bg-blue 
  background: rgb(50,101,196);

.bg-red 
  background: rgb(196,50,53);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

---

相关：How to make the row stretch remaining height

【讨论】：

一切都很好，直到第一行的文本开始增长并隐藏在第二行下。codepen.io/anon/pen/maVoKy：/

@Nate 你看example 我附上了吗？无论如何，在我的情况下，设置固定高度不是一种选择..

你用的是什么浏览器？在 chrome 中，你的第一行对我来说超过了屏幕的高度，但它不会“隐藏”在第二行下面——而是将第二行推到屏幕外。在 Safari 上，它隐藏在第二行下方，感觉比 chrome 更合适。你到底想要达到什么目标？我也不想要一个固定的高度，但我知道它足够小，可以放在我预期的最小高度之内。我认为在这个问题域中，你有一个你知道是“小”的行，然后另一个应该扩展到剩余空间。这不是你想要的？

@Nate as ROW 1 在这个答案中有一个固定的高度，它不应该增长，但内容应该溢出到右边或底部。

@C4d 我明白了。我在使用中从第 1 行删除了固定高度，因为我希望两行占用整个空间，但第一行要最小。这听起来像m1l05z 想要的一样。也许这不是解决我的问题的最佳解决方案，但这是我发现的 =)。

【参考方案2】：

这是一个解决方案。包装器div 必须有h-100，适应高度的div 必须有flex-grow-1 和overflow-auto。这样，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>                

【讨论】：

非常感谢您的回答。这解决了我的问题。你能告诉我如何用两列实现同样的效果吗？我想要ColumnA和columnB，两者都应该适应高度并相互独立滚动。

【参考方案3】：

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

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