css sticky footer 布局 手机端

什么是css sticky footer 布局？

通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏，此时希望页脚在页面的底部 而当页面超过一屏时候，页脚会在文章的底部 ，网上有许多办法，我只实现期中的一种办法 留作备忘

首先是页面的布局

<template>
  <div id="app" class="app">
    <div class="wrapper clearfix">
        <div class="detail-main">
            <transition name="router-fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
    <div class="footer">
          <p>© 2015-2018 xx医疗科技 沪ICP备160xxxx</p>
    </div>
  </div>
</template>

我是在vue模板写的代码 注意 最外层需要个calss为app的盒子 里面分为 wrapper 和 footer 并列的两个层级 wrapper里面放置页面内容 footer 放置页脚 而wrapper里面需要再套一个detail-main放置主要内容

     .app
         position fixed
         z-index 100
         top 0
         left 0
         width 100%
         height 100%
         overflow auto
         .wrapper
             min-height 100%
             .detail-main
                 margin-top 0
                 padding-bottom 40px
             

 .footer
         position relative
         margin -40px auto 0 auto
         clear both
         p
             height 40px
             line-height 40px
             font-size 12px
             text-align center
             float left
             width 100%  

样式因为我习惯用stylus 最外层.app 为fixed 宽高为全屏  定位左上0 0  wrapper  设置他的最小高度为100%  而关键点在他里面的内容区域 .detail-main 设置他距离底为40px的高度padding

而与wrapper同级的footer设置他距离顶部为-40px的margin relative的定位和清除浮动

这样就实现了一个sticky footer

页脚会始终定位在页脚底部。