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放置主要内容

 1     .app 
 2         position fixed 
 3         z-index 100
 4         top 0 
 5         left 0 
 6         width 100% 
 7         height 100% 
 8         overflow auto 
 9         .wrapper 
10             min-height 100% 
11             .detail-main
12                 margin-top 0  
13                 padding-bottom 40px 
14

 1 .footer
 2         position relative 
 3         margin -40px auto 0 auto 
 4         clear both
 5         p 
 6             height 40px 
 7             line-height 40px 
 8             font-size 12px 
 9             text-align center 
10             float left
11             width 100%

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

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

这样就实现了一个sticky footer

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

css sticky footer 布局 手机端

css sticky footer 布局手机端