经典的css sticky footer 布局

本文主要是介绍经典的css sticky footer 布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【sticky footer】 指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。

实现效果如下图。

实现——
header.vue中首先创建3个div层。detail-wrapper,detail-main,detail-close

    <div v-show="detailShow" class="detail"><div class="detail-wrapper clearfix">//清除浮动，当内容不足时，撑开高度min-height: 100%<div class="detail-main">//内容区</div></div><div class="detail-close">//底部关闭图标<span class="icon-close"></span></div>

clearfix为通用清除浮层样式代码，一般应用在含有浮动结构的代码中。例如这里的sticky footer。
base.styl中的clearfix代码为：

.clearfixdisplay: inline-block&:afterdisplay: blockcontent: "."height: 0line-height: 0clear: bothvisibility: hidden

header.vue中的style区域代码为：

  .detailposition: fixedtop: 0left: 0width: 100%height: 100%background: rgba(7, 17, 27, 0.8)z-index: 100overflow: auto//内容足够时下滑。.detail-wrappermin-height: 100%//当内容不足时，撑开高度min-height: 100%.detail-mainmargin-top: 64px//这里顶部有128px的距离，所以用margin-top,没有可以不加。padding-bottom: 64px//给底部关闭图标层预留空间，一定要有。.detail-closeposition: relativewidth: 32pxheight: 32pxmargin: -64px auto 0 auto//-负margin要与前面内容层里预留的一致。左右两边auto保持居中。clear: bothfont-size: 32px

这篇关于经典的css sticky footer 布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---