什么是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

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

css sticky footer 布局 手机端的更多相关文章

  1. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  2. css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...

  3. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  4. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  5. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  6. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  7. 前端经典布局:Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  8. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  9. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. 利用Filter解决跨域请求的问题

    1.为什么出现跨域. 很简单的一句解释,A系统中使用ajax调用B系统中的接口,此时就是一个典型的跨域问题,此时浏览器会出现以下错误信息,此处使用的是chrome浏览器. 错误信息如下: jquery ...

  2. 【IDEA】热部署插件Jrebel破解安装

    JRebel 介绍 IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,才能生效,浪费不少生命啊.目前对于idea热部署最好的解决方案就是安装JRebel插件 ...

  3. js 发送验证码倒计时

    首先写一个按钮: <input type="button" id="btn" value="免费获取验证码" onclick=&quo ...

  4. 最短路径:HDU2006-一个人的旅行(多个起点,多个终点)

    题目: 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. 推荐Android几个优质的完整项目学习

    ==>来自于微信公众号==鸿洋.大家可以关注一波大神之作. 后台经常有人问我能不能推荐几个完整项目用于学习.借着周末的机会,给大家推荐几个,项目我基本都在本地运行过,并且会在文章末尾提供每个项目 ...

  6. 关于RelativeLayout设置垂直居中对齐不起作用的问题

    直接上代码 1.原有代码:(红色字体部分不起作用,无法让RelativeLayout中的textview居中) <RelativeLayout Android:id="@+id/aut ...

  7. MySQL之索引(三)

    聚簇索引 聚簇索引并不是一种单独的索引类型,而是一种数据存储方式.具体的细节依赖于其实现方式,但InnoDB的聚簇索引实际上在同一个结构中保存了B-Tree索引和数据行.当表有聚簇索引时,它的数据行实 ...

  8. Gpfixup

    Updated: April 17, 2012 Applies To: Windows Server 2003, Windows Vista, Windows Server 2008, Windows ...

  9. IOS开发---菜鸟学习之路--(八)-实现新闻页面

    本章将具体讲述如何结合前两张的内容最终实现一个新闻页面的雏形 之所以称之为雏形,是因为本章实现的内容只是实现了最基础的效果 还有很多其他诸如下拉刷新 页面导航等效果都需要投入一些时间进行研究 好了直接 ...

  10. MFC DLL 可以封装MFC的窗体 供别的MFC程序使用

    MFC DLL  可以封装MFC的窗体 供别的MFC程序使用 在庞大程序分工里面 非常可取. 可以细分每个窗体就是单独的 模块. [后续不断完善]