sticky footer 实现页脚块位置根据页面内容长度变化

布满荆棘的人生 2023-03-14 05:59 16阅读 0赞
sticky footer，指的是当页面内容不够长的时候，页脚的位置粘贴在视窗底部；当页面内容足够长时，页脚块会被内容向下推送，位置显示在内容下方，不会遮挡内容

sticky footer比较常用的布局方式如下：

  1. <div class="detail">
  2.     <!--外层的这个wrapper与底部区域同级-->
  3.     <div class="detail-wrapper clearfix">
  4.         <div class="detail-main">
  5.             <!--页面内容写在这-->
  6.         </div>
  7.     </div>
  8.     <!--底部区域-->
  9.     <div class="detail-close">
  10.         <i class="icon-close"></i>
  11.     </div>
  12. </div>

样式如下（这个例子中我的最外层div是一个遮罩层，样式根据自己的需求修改）

  1. .clearfix::after { 
  2.   content:"";
  3.   display: block;
  4.   height:0;
  5.   line-height: 0;
  6.   clear:both;
  7.   visibility: hidden;
  8. }
  9. .clearfix{ 
  10.   display: inline-block;
  11. }
  13. .detail { 
  14.     position:fixed;
  15.     z-index:100;
  16.     left:0;
  17.     top:0;
  18.     width:100%;
  19.     height:100%;
  20.     overflow:auto;   /*不能是hidden*/
  21.     background:rgba(0,0,0,.5);
  22. }
  23. .detail-wrapper { 
  24.     min-height:100%;
  25.     width:100%;
  26. }
  27. /*需要给底部的区域留位置，使用padding-bottom*/
  28. .detail-main { 
  29.     padding-bottom:64px; 
  30.     margin-top:64px;
  31. }
  32. /*底部区域*/
  33. .detail-close { 
  34.     position:relative;
  35.     width:32px;
  36.     height:32px;
  37.     margin:-64px auto 0 auto;   /*注意margin-top需要是负值*/
  38.     clear:both;  
  39.     font-size:32px;
  40. }

发表评论

表情：
评论列表 （有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

    相关 listview 设置页脚（footer）

    有时候使用ListView显示一些数据时，希望在列表项的尾部增加一个页脚（注：不是放在屏幕的最低端），页脚会随着ListView的数量的增加而自动跟随，由于ListView在数

    蔚落蔚落/ 0 赞/ 252 阅读

    相关 Sticky footer

    Sticky footer布局是什么？ 我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

    àì夳堔傛蜴生んèńàì夳堔傛蜴生んèń/ 0 赞/ 243 阅读