如何让 CSS 盒子始终保持在网页底部？

如何让 css 盒子始终处于底部

在 html 中，创建一个具有 footer 类的外层容器和一个 nội dung 类的外层容器。外层容器使用 flex-direction: column; 垂直排列内部元素，并使用 min-height: 100vh; 将容器高度设置为视口高度。

在 css 中，为 footer 类指定以下样式：

.footer {
  margin-top: auto;
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  padding: 40px 0 40px 0;
  font-size: 18px;
}

添加 margin-top: auto; 将盒子推到容器的底部。即使容器高度改变，盒子也会保持在底部。

立即学习“前端免费学习笔记（深入）”；

以上就是如何让 CSS 盒子始终保持在网页底部？的详细内容，更多请关注其它相关文章！