CSS Bootstrap div 拉伸至页面底部

在本文中，我们将介绍如何使用CSS和Bootstrap来实现div元素拉伸至页面底部的效果。

阅读更多：CSS 教程

1. CSS Flexbox

CSS Flexbox是一种强大的布局模块，可以帮助我们轻松地实现div元素拉伸至页面底部的效果。

首先，在HTML文件的头部引入CSS文件：

<link rel="stylesheet" href="styles.css">

然后，在styles.css文件中添加以下CSS代码：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

以上代码的解释如下：
– 首先，我们将页面的html和body元素的高度设置为100%并且去除默认的margin。
– 接着，我们将.container元素的display属性设置为flex，并将flex-direction属性设置为column。这样.container内的元素就可以使用flex布局，并且垂直排列。
– 最后，我们将.content元素的flex属性设置为1。这样.content元素会占据剩余的所有空间，实现页面底部拉伸的效果。

现在，我们就可以在HTML文件中使用.container和.content类来实现div元素拉伸至页面底部的效果了：

<div class="container">
  <div class="content">
    这是要拉伸至页面底部的内容。
  </div>
</div>

2. Bootstrap Grid System

除了CSS Flexbox，我们还可以使用Bootstrap的网格系统来实现div元素拉伸至页面底部的效果。

首先，在HTML文件的头部引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap.min.css">

然后，在HTML文件中添加以下代码：

<div class="container-fluid">
  <div class="row vh-100">
    <div class="col">
      <div class="content">
        这是要拉伸至页面底部的内容。
      </div>
    </div>
  </div>
</div>

以上代码的解释如下：
– 首先，我们使用.container-fluid类来创建一个全屏的容器。
– 然后，我们使用.row和.vh-100类来创建一个占据整个视口高度的行。
– 最后，我们使用.col类来创建一个占据整个行宽度的列，并在列内部添加.content类来实现页面底部拉伸的效果。