CSS 如何创建具有垂直可滚动内容和固定底部的DIV，使其始终可见

在本文中，我们将介绍如何使用CSS创建一个包含垂直可滚动内容和固定底部的DIV，使其始终可见。我们将展示一些示例代码和说明来帮助你理解和应用这些技巧。

首先，我们需要创建一个包含内容的DIV，并设置其高度和宽度。

<div class="container">
  <div class="content">
    <!-- 插入你的内容 -->
  </div>
  <div class="footer">
    <!-- 插入你的固定底部内容 -->
  </div>
</div>

接下来，我们需要使用CSS来设置这个DIV的样式。我们将使用Flexbox布局来实现垂直滚动和固定底部，同时保持内容的可见性。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置DIV的高度为视口高度 */
  overflow-y: auto; /* 允许内容垂直滚动 */
}

.content {
  flex: 1; /* 填充剩余空间 */
  padding: 20px; /* 设置内容内边距 */
}

.footer {
  flex-shrink: 0; /* 防止底部内容缩小 */
  background-color: #f9f9f9; /* 设置底部的背景颜色 */
  padding: 15px; /* 设置底部内容的内边距 */
  text-align: center; /* 设置底部内容居中 */
  position: sticky; /* 让底部内容固定在底部 */
  bottom: 0; /* 设置底部内容相对于父容器的底部位置 */
}

我们使用display: flex来创建一个垂直方向的Flexbox布局，使得内容和底部在垂直方向上排列。然后，我们设置内容的flex: 1，这样它将填充剩余的空间，而底部则使用了flex-shrink: 0来防止缩小。为了实现垂直滚动，我们将overflow-y设置为auto，这样内容超出容器高度时将出现滚动条。底部部分我们使用了position: sticky来让它在底部固定显示，并使用bottom: 0将其定位到父容器的底部。

现在，我们已经创建了一个具有垂直可滚动内容和固定底部的DIV。你可以根据自己的需求来添加内容和样式。以下是一个完整的例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
    }

    .content {
      flex: 1;
      padding: 20px;
    }

    .footer {
      flex-shrink: 0;
      background-color: #f9f9f9;
      padding: 15px;
      text-align: center;
      position: sticky;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>这是一个垂直滚动的DIV</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor lectus nec diam vestibulum, ac pharetra ipsum vulputate. Ut ac mi non purus facilisis luctus at quis urna. Nulla facilisi. Curabitur gravida enim libero, lobortis vulputate eros bibendum sed. Nunc luctus bibendum ex, eget efficitur tellus vestibulum vel. Cras vestibulum sit amet justo at sodales. Fusce fermentum laoreet dui, at ultricies risus porta vitae. Praesent eu feugiat ipsum. Suspendisse nec consequat metus. Praesent eu turpis sem. In et nunc dui. Fusce aliquam placerat convallis.</p>
      <!-- 插入更多内容 -->
    </div>
    <div class="footer">
      <p>这是一个固定的底部</p>
    </div>
  </div>
</body>
</html>

你可以复制上述代码到HTML文件中，并在浏览器中打开以查看效果。当内容超出DIV的高度时，你将看到垂直滚动条，并且底部将始终可见。

阅读更多：CSS 教程