使用 Bootstrap 行容器和列将列颜色扩展到页面底部

Question

我似乎无法将 bootstrap 列的颜色扩展到页面底部。我不想设置固定高度，我希望它延伸到浏览器屏幕的底部。

HTML:

<div class="container">
  <div class="row">
    <div class="col box1">
      Box1
      I need the blue to extend to bottom of page
    </div>
    <div class="col">
      Box2
    </div>
  </div>
</div>

CSS:
.box1 {
  background-color: aqua;
}

JS Fiddle 这里： https://jsfiddle.net/romanbogza/oL3nk8wz/

Answer 1

您可以使用 min-vh-100（最小高度：100vh；）class。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col box1 min-vh-100 bg-info">
            Box1 I need the blue to extend to bottom of page
        </div>
        <div class="col">
            Box2
        </div>
    </div>
</div>

使用 Bootstrap 行容器和列将列颜色扩展到页面底部

Extend column color to bottom of page using Bootstrap rows containers and columns

css

styling

flexbox

bootstrap-4