对“粘连”footer布局的思考和总结
经典的"粘连"footer布局
参考文章链接在文章末尾,简单的语言总结如下:
经典的“粘连”footer布局就是。我们有一块内容<main>
。当<main>
的高度足够长的时候,紧跟在<main>
后面的元素<footer>
会跟在<main>
元素的后面。当<main>
元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>
元素能够“粘连”在屏幕的底部。如下图所示:
当main
足够长时
当main
比较短时
上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况:
我们需要实现的布局就是 按钮“提交”所在的区域能够自由伸缩。当屏幕较低时,最就是“提交”按钮和表单所在的区域接触或者有一定的间隙。 示例图就是下面的:
当屏幕足够高的时候
当屏幕比较低的时候
上面的布局在移动端需要考虑以下因素对布局的影响:
安卓上键盘弹起会对
absolute
和fixed
产生影响;我们的绝对定位的元素是使用的
bottom
相对于屏幕的底部定位;
为了解决以上的两个问题的解决方案:
使用正常文档流的元素包裹绝对定位的元素;
绝对定位元素的父级元素应该有一个
min-height
防止,父级元素太低时,绝对定位元素“溢出”父级元素;(min-height >= 绝对定位元素 + bottom);
根据“粘连”footer布局的思想,结合弹性盒布局。我们需要的这种布局可以有两种方式,分别介绍如下:
1.使用vh
单位
先来了解下vh
和vw
这两个单位。
vh
相对于视口的高度。视口被均分为100单位的vh。vw
相对于视口的宽度。视口被均分为100单位的vw。
上面两个单位通俗的意义就是在css中获取当前屏幕的高度和宽度(不通过js计算)。
示例代码如下:
<body><div class="item1"></div><div class="item2"></div><div class="item3"><div class="btn-item">你好</div></div>
</body>
css代码如下:
* {margin: 0;padding: 0;
}body {/*主要就是这里获取视窗口的高度*/min-height: 100vh;display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-flow: column;-ms-flex-flow: column;flex-flow: column;
}.item1 {height: 100px;background-color: #ddd
}.item2 {height: 300px;background-color: #fea0a0
}.item3 {/*防止绝对定位的元素溢出父级元素*/min-height: 30px !important;border: 1px solid #481eff;position: relative;height: 0;-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;-webkit-flex-basis: 0;-ms-flex-preferred-size: 0;flex-basis: 0;max-height: 100%;
}.btn-item {position: absolute;bottom: 10px;border: 1px solid #000;
}
以上就是完全使用css来实现我们项目中布局的方法,但是这个方法有一个很明显的缺点就是vh
单位的兼容性问题。兼容列表如下:
因为兼容性问题,纯css的方法在我们的项目中使用还是不现实。但是我们想下问题的本质:在使用弹性盒的基础上,我们唯一需要做的就是知道弹性盒元素的高度(就是我们项目中屏幕的高度)。
2.js简单计算满足兼容问题。
就是在dom树渲染完成以后给body
设置高度未屏幕的高度。为了避免不必要的“重绘”或者是“重排”在head标签中添加如下js。
var callback = function(){document.body.style.height=window.screen.height+'px';
};//是否是页面加载触发绑定了事件
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) {callback();
} else {//DOMContentLoaded 仅支持ie9+ 和移动端 <=ie8 使用 onreadystatechange 可以监听dom是否加载完毕document.addEventListener("DOMContentLoaded", callback);
}
使用 jQuery 或者是 Zepto 的方法,仍然在head标签中添加如下js。
$(function(){$('body').height($(window).height());
})
所以在我们的项目中结合弹性盒布局和添加简单的动态js计算屏幕的高度。就可以完美实现我们项目中需要的布局。
body {/*使用js动态计算就可以不使用vh单位*//*min-height: 100vh;*/display: flex;
}
参考文章:
因为是一个
cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer
对“粘连”footer布局的思考和总结相关推荐
- 粘连 Footer 的 5 种方法 | CSS-Tricks
本文转载自:http://www.zcfy.cc/article/491 文中对于"吸附"布局的实现非常巧妙,当我第一次看到那个效果图,第一时间也没有想到好的实现方法. 一个简短的 ...
- html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
- 观「招商银行」隐私计算布局的思考(36氪收录)
今日立冬,附上故宫博物院的石狮子镇文. 这两天深度阅读了36氪对「招商银行」总行人工智能实验室负责人李金龙的采访,恰好是该领域的从业者,便想根据李金龙老师的发言整理出自己的思考. 前言 李金龙老师表示 ...
- sticky footer布局,页面不足一屏底部footer固定在视窗底部,否则底部footer自动向下顺延
sticky布局在pc端和移动端都有很大的需求,下面列举一下常用并亲测的几种方法. 1.flex布局方式实现 <!DOCTYPE html> <html lang="en& ...
- css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
- CSS绝对底部布局 Sticky footer
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内 ...
- css sticky footer实现,css sticky footer经典布局
什么是sticky footer布局? 一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部:当内容高度超过一屏时,页脚紧随其后. 方法一:flex弹性盒子布局 父容器container的dis ...
- html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局 三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
- RecyclerView添加header与footer
前言 这次主要关于RecyclerView添加header和footer的实现方法,我们都知道,在使用ListView的时候我们能自由的给自己的ListView添加头部与尾部.使用addHeaderV ...
最新文章
- 安装ESXI 5.1
- 卖不动了,5G资费套餐再降价,网友:再等等再等等
- nltk packages下载问题
- RF(接口自动化测试)
- python是什么语言简称为_python为何称为胶水语言
- rust自创服务器_萌新教大家搭建Rust服务器(局域网和公网)
- ASP.NET会话(Session) 转载自:寒羽枫(cityhunter172)
- 软考高项 : (14)论信息系统项目的沟通管理
- java+springboot学校小卖部超市收银系统maven
- 微信公众平台 微接口 接口100 API100 接口大全
- mysql模糊搜索 like_Mysql必知必会(3):模糊查询(LIKE)
- paddle复现colorGAN(动漫黑白线条上色)
- Excel中批量添加批注图片
- 递归实现求最大公约数
- javascript 内置对象字符串总结及案例
- python 斗地主(1)
- C++,ini文件操作(包含类)
- BP世界能源统计年鉴2022excel:全球世界各国能源消耗CO2碳排放石油天然气煤炭可再生能源储量发电量
- arm64 smmu 驱动笔记
- redux异步之redux-thunk
热门文章
- ulink php,【转载】15款USB数字界面横向评测(对比顶级CD转盘)!多看点!
- ICA独立成分分析—FastICA基于负熵最大
- 6 areas of artificial intelligence to watch closely 需要密切关注的六大人工智能/机器学习领域
- 关于Anaconda的环境和包管理
- 多数公司容易犯的5个大数据错误
- Python学习笔记之异常
- Apache启动错误:could not bind to address[::]:443
- 小程序中textarea点击按钮事件
- Codeforces 914D - Bash and a Tough Math Puzzle 线段树,区间GCD
- 创建Hbase Hive外部表报错: Unable to determine ZooKeeper ensemble