Bootstrap 4行填充剩余高度 [英] Bootstrap 4 row fill remaining height

问题描述

我正在努力使行伸展以填充剩余的可用高度.我尝试将h-100添加到行类，但这会导致屏幕底部出现空白.一定有一种方法可以做到，但是我完全被困住了.这是我的代码:

I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100 to the row class but that causes a white space at the bottom of the screen. There must be a way to do it but I'm totally stumped.. Here is my code:

<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/?编辑者= 1100

我想让蓝色行(第2行)填充所有红色空间.有什么建议吗?

I'd like to make the the blue row (ROW 2) fill all the red space. Any suggestions?

谢谢

推荐答案

使用

Use the Bootstrap 4.1 flex-grow-1 class...

https://www.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实用程序类的另一个示例

Update 4.3.1: Another example using the vh-100 utility class

https://www.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>

相关:如何使行拉伸剩余高度

这篇关于Bootstrap 4行填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！