使用引导行容器和列将列颜色扩展到页面底部答案

【问题标题】：Extend column color to bottom of page using Bootstrap rows containers and columns使用引导行容器和列将列颜色扩展到页面底部
【发布时间】：2020-07-31 11:45:22
【问题描述】：

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

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 小提琴： https://jsfiddle.net/romanbogza/oL3nk8wz/

【问题讨论】：

标签： css bootstrap-4 flexbox styling

【解决方案1】：

您可以为此使用 min-vh-100 ( min-height: 100vh; ) 类。

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

【讨论】：