CSS 如何让盒子始终固定在页面底部?

风之吻 网站开发 658

CSS 如何让盒子始终固定在页面底部?-第1张图片-风享汇

  在这个问题中,我们希望实现一个固定在底部、不受页面可视区域大小影响的盒子。

  问题描述:

  如图所示,当页面高度小于盒子的高度时,盒子会正常显示在底部。但是,当向上滚动页面时,盒子会跟随滚动移动,而不是固定在底部。

  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 值表示,浏览器将根据可视区域高度自动计算合适的上边距,从而确保盒子始终固定在底部。

标签: html css

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~