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

让底部盒子始终处于底部

如何保持底部盒子始终位于视图窗口的底部？这是个常见问题，尤其是在响应式设计中。

要解决这个问题，请使用 margin-top: auto; 将底部盒子的顶部边缘设置成自动调整为剩余高度，这样它将始终处于页面底部。

以下是使用 margin-top: auto; 的示例：

.outerDiv {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: auto;
}

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

通过使用 margin-top: auto;，底部盒子将始终保持在视图窗口的底部，无论内容有多长。