Css Sticky footer布局
2020-05-01 19:13
1336 查看
概况:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送
引用: http://www.w3cplus.com/css3/css-secrets/sticky-footers.html © w3cplus.com
套路:主要为三层
<div> <div class="detail-wrapper clearfix"> <!--内容--> <div class="detail-main">啦啦啦啦</div> </div> <!--页脚--> <div class="detail-关闭">关闭</div> </div>
.clearfix{ display:inline-block; } .clearfix:after{ display:block; content:"."; height:0; line-height:0; clear:both; visibility:hidden; } .detail-wrapper{ min-height:100%;/*最小高度要问视窗高度才可以铺满窗口*/ } .detail-main{ padding-bottom:64px;/*pad-bot为了给底部close留出空间*/ } .detail-close{ position:relative; width:32px; height:32px; marginn:-64px auto 0 auto;/*当前div上移64px*/ clear:both; font-size:32px; }
转载于:https://www.cnblogs.com/GaoX/p/6595765.html
YT1360624 原创文章 0获赞 0访问量 83 关注 私信相关文章推荐
- css sticky footer布局
- CSS Sticky Footer布局
- css sticky footer布局
- CSS Sticky footer完美底部布局
- CSS Sticky Footer 布局
- css sticky footer布局
- CSS Sticky footer布局
- 【css技能提升】完美的 Sticky Footer 布局
- css sticky footer 布局 手机端
- css sticky footer 布局 手机端
- css sticky footer写底部布局
- A CSS Sticky Footer——CSS底部固定布局分析
- CSS布局中的sticky footers布局
- CSS DIV 样式布局 III 头header 脚 footer 身 center
- Sticky Footer: 完美的CSS绝对底部
- CSS奇淫技巧 :视差图像,sticky footer 混合模式等等
- css sticky footer
- CSS Sticky Footer: 完美的CSS绝对底部
- CSS使用position:sticky 实现粘性布局
- sticky-footer布局