Bootstrap 4行填充剩余高度

Question

Bootstrap 4行填充剩余高度

56

我正在努力让一行充满剩余的可用高度。我尝试在行类中添加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

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

谢谢。

- Egor

3个回答

7

这是一个解决方案。包装器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>

- Alejandro Bazán

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

1

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

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

- VJJ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

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

https://codeply.com/go/Iyjsd8djnz

html,body{height: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>

相关链接：如何使行占据剩余的高度