css 如何让盒子始终保持底部
在这个问题中，我们希望实现一个固定在底部、不受页面可视区域大小影响的盒子。
问题描述：
如图所示，当页面高度小于盒子的高度时，盒子会正常显示在底部。但是，当向上滚动页面时，盒子会跟随滚动移动，而不是固定在底部。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="outerDiv">
<div class="footer">
<!-- 内容 -->
</div>
</div>CSS 样式：
.outerDiv {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.footer {
width: 100%;
background: #42ace8;
color: white;
text-align: center;
padding: 40px 0 40px 0;
font-size: 18px;
}解决方案：
为了解决这个问题，我们可以使用 margin-top: auto; 属性。这个属性会根据可视区域（viewport）的高度，自动设置盒子的上边距，使其始终保持在底部。
修改后的 CSS：
.footer {
...
margin-top: auto;
...
}使用 auto 值表示，浏览器将根据可视区域高度自动计算合适的上边距，从而确保盒子始终固定在底部。
以上就是CSS 如何让盒子始终固定在页面底部？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
622
收藏
