sticky footer布局
本文转载于:猿2048网站sticky footer布局php
1、什么是sticky footerapp
在网页设计中，Sticky footers设计是最古老和最多见的效果之一。它能够归纳以下：若是页面内容不够长的时候，页脚块粘贴在视窗底部；若是内容足够长时，页脚块会被内容向下推送。布局
2、应用场景案例网站
以下：spa
当页面内容不够长，比较少时，’X’关闭按钮粘贴在视窗底部；当内容够多时，“X”按钮会被往下推送，它不会遮盖住内容。这就是饿了么点击物品是弹出一个全屏的详情页，点击关闭按钮关闭的实现。设计
咱们将内容填的不少时，它就出现了滚动条，移动滚动条将内容移到底部，咱们能够看到“X”按钮被推进到内容的下面了。code
3、实现blog
HTML：文档
<div v-show="detailShow" class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"> <p>合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 合理收费的附件是丽芙家居按时交付两地分居四大金刚垃圾管理按时交流的方式拉倒拉时间过来华东师范红色广告看 </p> </div> </div> <div class="detail-close"> <i class="icon-close"></i> </div> </div>
CSS：get
.detail { position: fixed; top: 0; left:0; z-index: 100; width: 100%; height: 100%; overflow: auto; background-color: rgba(7,17,27,0.8); } .detail-wrapper { min-height: 100%; } .detail-wrapper .detail-main { margin-top: 32px; /* 关键在于这里设置了padding-bottom */ padding-bottom: 64px; } .detail-close { position: relative; width: 32px; height: 32px; margin: -64px auto 0 auto; clear: both; font-size: 32px; }
.clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
height: 0;
line-height: 0;
overflow: hidden;
clear: both;
}
一、当页面内容很少时（detail-main的内容很少时）让“X”按钮粘贴在窗口底部：
detail-wrapper与detail-close是同一级的，detail-wrapper的min-height:100%占满全屏，既然detail-wrapper占满全屏了，咱们为何还会看到detail-close呢，在窗口下方出现呢？由于detail-close的position:relative,它是不脱离标准文档流的，因此他的占位空间任是排在detail-main块下面，可是咱们给detail-close设了一个负的margin-top（margin-top： -64px），因此他就出如今咱们的视线里即窗口的下方。
二、当页面足够多时，让“X”按钮被内容推进到下面：
关键在于detail-main设了一个padding-bottom给detail-close（即为关闭按钮）提供了一个放在上面的空间，避免detail-close负的margin-top（margin-top：-64px）使detail-close遮盖了内容，detail-close利用负的margin-top就显示在了内容的下面。