CSS 万能的 sticky-footer 写法

最新推荐文章于 2023-12-08 22:07:13 发布

原创最新推荐文章于 2023-12-08 22:07:13 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#css #sticky #footer

前端专栏收录该内容

186 篇文章

订阅专栏

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推。

我们来看一下效果图：

可以看到不管怎样，关闭按钮，页面内容不够的时候，关闭按钮在页面底部。页面内容够长时，关闭按钮在内容的最下面，滚到最下面才能看到。

它不是 fixed 在屏幕的底部的，从第二张图片就可以看出来。

那么，是怎样做的呢？

<div v-show="detailshow" class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main">
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
      <p>{{ seller.bulletin }}</p>
    </div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></i>
  </div>
</div>

样式如下：

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

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden