CSS 在视口底部附着的DIV

在本文中，我们将介绍如何使用CSS将一个DIV元素固定在视口的底部。

阅读更多：CSS 教程

介绍

在Web开发中，有时我们需要将某个元素固定在页面的底部，无论页面内容的高度如何变化。这在创建固定页脚或悬浮工具栏的情况下非常有用。

使用position和bottom属性

要实现将DIV元素固定在视口底部，我们可以使用CSS的position属性和bottom属性的组合。position属性用于指定元素的定位方式，而bottom属性用于指定元素与父元素底部之间的距离。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.container {
  background-color: #f0f0f0;
  position: relative;
  height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
  <h1>页面内容</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="footer">
    这是一个固定在底部的DIV
  </div>
</div>
</body>
</html>

在这个示例中，我们创建了一个包含页面内容和页脚的容器DIV。容器DIV使用了position: relative;来为页脚的定位提供基准。页脚DIV使用position: absolute;来脱离文档流，并使用bottom: 0;来固定在容器底部。通过设置容器DIV的高度为100vh，我们确保容器DIV始终填满整个视口。

使用flex布局

除了使用position和bottom属性外，我们还可以使用CSS的flex布局来将DIV元素固定在底部。flex布局是一种现代的CSS布局方法，它提供了更灵活的布局选项。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  background-color: #f0f0f0;
  flex: 1;
}

.footer {
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
  <h1>页面内容</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="footer">
  这是一个固定在底部的DIV
</div>
</body>
</html>

在这个示例中，我们将body元素的display属性设置为flex，并设置flex-direction属性为column，使内容按垂直方向排列。容器DIV的flex属性设置为1，使其自动填充剩余的垂直空间。页脚DIV直接放在容器DIV之后，由于flex布局的特性，它将自动固定在底部。