时间戳

首页 > 解决方案 > 使用引导行容器和列将列颜色扩展到页面底部

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

问题描述

我似乎无法将 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/

标签： cssbootstrap-4flexboxstyling

解决方案

您可以为此使用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>

推荐阅读