css将div层固定显示在页面底部不随滚动条滚动

下面是详细讲解“css将div层固定显示在页面底部不随滚动条滚动”的完整攻略：

1. 使用CSS的position属性

2. 首先，在HTML文件中创建一个div标签，用于放置需要固定在页面底部的内容：

<div class="footer">
  <!-- 这里是需要固定在页面底部的内容 -->
</div>

• 然后，在CSS文件中为这个div添加一些样式：

.footer {
  position: fixed; /* 固定位置 */
  bottom: 0; /* 距离底部为0 */
  left: 0; /* 距离左侧为0 */
  right: 0; /* 距离右侧为0 */
}

这样设置之后，即可将这个div层固定在页面底部，不随滚动条滚动。

1. 使用flex布局

2. 首先，在HTML文件中创建一个包含两个div标签的容器，一个div是需要固定在页面底部的内容，另一个div是其他内容的容器：

<div class="container">
  <div class="content">
    <!-- 这里是其他内容的容器 -->
  </div>
  <div class="footer">
    <!-- 这里是需要固定在页面底部的内容 -->
  </div>
</div>

• 然后，在CSS文件中使用flex布局，将容器设置为垂直方向的flex布局，并将需要固定在页面底部的内容设置为底部对齐：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让容器高度充满整个屏幕 */
}

.content {
  flex: 1; /* 让内容容器占据剩余空间 */
}

.footer {
  align-self: flex-end; /* 将需要固定的内容放在底部 */
}

这样设置之后，即可将这个div层固定在页面底部，不随滚动条滚动。

以上就是两种将div层固定显示在页面底部不随滚动条滚动的攻略。需要注意的是，第二种方法需要浏览器支持flex布局。