Sticky footers布局

最新推荐文章于 2023-04-28 21:43:02 发布

原创最新推荐文章于 2023-04-28 21:43:02 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sticky footers #footer #底部布局 #底部固定

Style 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使页面底部组件（如关闭按钮）始终显示在弹框底部的方法。通过使用固定定位和适当的 CSS 设置，确保了即使内容长度变化也能保持组件的位置不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sticky footers:

如果页面内容不够长的时候，footer粘贴在视窗底部；如果内容足够长时，footer会被内容向下推送。总的来说就是footer永远在页面的最下面。

例如

我们想要实现 x按钮一直在弹框的最下面
这里写图片描述
当我们有内容，却不够一屏时：

当超出一屏幕时：

实现：

HTML：

<div class="bg-wrapper">
  <div class="main-wrapper">
    <div class="detail-main">
      放置内容
    </div>
  </div>
  <div class="close">
    <i class="icon-close">x</i>
  </div>
</div>

对应的scss：（因为我们的是弹框，所以用了fixed布局）

.bg-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10px);
      overflow: auto;
      background: rgba(7, 17, 27, 1);
      z-index: 100;
      .main-wrapper {
        min-height: 100%;
        .detail-main {
          padding-bottom: 64px;
        }
      }
      .close {
        position: relative;
        width: 32px;
        height: 32px;
        margin: -64px auto 0;
        font-size: 32px;
        clear: both;
      }
    }