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

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS 盒子如何始终保持页面底部？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

如何使 css 盒子始终位于底部？

问题描述

如图所示，在正常情况下，盒子会正常显示在页面底部：

<img src="[图片1]" width="200" style="max-width:100%" />

但是，在触发“上箭头”事件后，盒子会向上移动：

<img src="[图片2]" width="200" height="200" />

视图代码和样式代码如下：

<div class="outerdiv">
  <div class="footer">
    &copy; 2024 by ailu &nbsp
    <a href="xxx" target="_blank">
      <img alt="github" class="github" src="../../assets/github.svg" width="30">
    </a>
  </div>
</div>

.outerdiv{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.footer {
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  margin-top: 400px;
  padding: 40px 0 40px 0;
  font-size: 18px;
}

解决方案

要让盒子始终位于底部，可以使用 margin-top: auto;。

示例：

.footer {
  ...
  margin-top: auto;
}

margin-top: auto; 会自动设置上边距，使盒子占据剩余的垂直空间，从而始终位于底部。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~