css sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

honey_seve7n

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/honey_seve7n/article/details/83003877

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细解释了CSS Sticky Footer布局的实现原理，当页面内容不足时，页脚粘贴在视窗底部；内容超出时，页脚被内容向下推送。通过示例代码展示了如何使用HTML和CSS创建这一布局，确保在不同页面长度下，页脚元素的位置正确。

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

什么是css sticky footer布局？

如果页面内容不足一页的时候，页脚块粘贴在视窗底部；如果内容足够长时，超过一页时，页脚块会被内容向下推送。此案例中是详情页面当页面内容不足一页，close按钮始终在底部，当页面内容超过一页，close按钮不会被内容遮盖，而是向下推送，在内容下面

如图：

样例

html代码，布局模板，必须有一个wrapper，包裹内容部分

<!--详情页-->
<div class="detail" v-show="detailShow"> <!--详情页灰色背景-->
  <div class="detail-wrapper clearfix"><!--sticky布局容器，清除浮动-->
    <div class="detail-main"><!--内容主体-->
      {{seller.bulletin}}
      {{seller.bulletin}}
      {{seller.bulletin}}
    </div>
  </div>
  <div class="detail-close"> <!--与detail-wrapper同级别，关闭按钮或者是footer-->
    <i>x</i>
  </div>
</div>

css部分：


  .detail-wrapper /*sticky容器*/
    width:100%
    min-height:100% /*保证容器最小高度是整页的高度*/
    .detail-main /*页面主体*/
     margin-top: 1.28rem
     padding-bottom: 1.28rem  /*一定设置这个，为close按钮占位保证内容不会覆盖close按钮*/
  .detail-close /*关闭按钮*/
    position:relative
    width:.64rem
    height:.64rem
    margin:-1.28rem auto 0 auto  /*当detail-wrapper占100%时，不会显示close按钮，按钮在它下面，设置负margin可以让它显示到页面之上 */
    clear:both  /*清除浮动*/
    font-size:.64rem