Bootstrap 4行填充剩余高度

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4 提供了一系列的 CSS 类和 JavaScript 插件，帮助开发者轻松地创建复杂的布局和交互效果。

类型

Bootstrap 4 的行填充剩余高度可以通过多种方式实现，以下是几种常见的方法：

方法一：使用 Flexbox

Bootstrap 4 基于 Flexbox，可以利用 Flexbox 的特性来实现行填充剩余高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Flexbox Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .full-height {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container-fluid full-height d-flex flex-column">
    <div class="row flex-grow-1 bg-light">
      <div class="col">
        This row will take up the remaining height.
      </div>
    </div>
    <div class="row bg-dark text-white">
      <div class="col">
        Fixed height row.
      </div>
    </div>
  </div>
</body>
</html>

方法二：使用 CSS Grid

虽然 Bootstrap 4 主要基于 Flexbox，但也可以结合 CSS Grid 来实现更复杂的布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 CSS Grid Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .full-height {
      height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
    .middle {
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="container-fluid full-height">
    <div class="row">
      <div class="col">
        Header
      </div>
    </div>
    <div class="row middle">
      <div class="col">
        This row will take up the remaining height.
      </div>
    </div>
    <div class="row">
      <div class="col">
        Footer
      </div>
    </div>
  </div>
</body>
</html>

应用场景

这种布局方式常用于需要一个固定高度的顶部或底部导航栏，而中间内容区域需要填充剩余高度的场景，例如仪表盘、管理后台等。

常见问题及解决方法

问题：行没有填充剩余高度

原因：可能是没有正确设置容器的高度或 Flexbox 属性。

解决方法：

确保父容器的高度设置为 100vh 或其他固定高度。
使用 flex-grow-1 类来使行填充剩余高度。

<div class="container-fluid full-height d-flex flex-column">
  <div class="row flex-grow-1 bg-light">
    <div class="col">
      This row will take up the remaining height.
    </div>
  </div>
</div>

问题：行内元素高度不一致

原因：可能是行内元素的默认高度不一致。

解决方法：

使用 Bootstrap 的 align-items 类来对齐行内元素。
手动设置行内元素的高度。

<div class="container-fluid full-height d-flex flex-column align-items-stretch">
  <div class="row flex-grow-1 bg-light">
    <div class="col">
      This row will take up the remaining height and align items vertically.
    </div>
  </div>
</div>