对“粘连”footer布局的思考和总结

经典的"粘连"footer布局

参考文章链接在文章末尾,简单的语言总结如下:

经典的“粘连”footer布局就是。我们有一块内容<main>。当<main>的高度足够长的时候,紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部。如下图所示:

main足够长时

main比较短时

上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况:

我们需要实现的布局就是 按钮“提交”所在的区域能够自由伸缩。当屏幕较低时,最就是“提交”按钮和表单所在的区域接触或者有一定的间隙。 示例图就是下面的:

当屏幕足够高的时候

屏幕足够高的时候

当屏幕比较低的时候

屏幕比较低的时候

上面的布局在移动端需要考虑以下因素对布局的影响:

  1. 安卓上键盘弹起会对absolutefixed产生影响;

  2. 我们的绝对定位的元素是使用的bottom相对于屏幕的底部定位;

为了解决以上的两个问题的解决方案:

  1. 使用正常文档流的元素包裹绝对定位的元素;

  2. 绝对定位元素的父级元素应该有一个min-height防止,父级元素太低时,绝对定位元素“溢出”父级元素;(min-height >= 绝对定位元素 + bottom);

根据“粘连”footer布局的思想,结合弹性盒布局。我们需要的这种布局可以有两种方式,分别介绍如下:

1.使用vh单位

先来了解下vhvw这两个单位。

  1. vh相对于视口的高度。视口被均分为100单位的vh。

  2. 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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这样去写你的 HTML

昨天在 twitter 上说&#xff0c;怎么忍心把页面写得这么难用&#xff1f;是的&#xff0c;这个世界还有一群人等着我们创建出来的东西&#xff0c;可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端&#xff0c;我们又怎么会忍心呢。之前就一直想写这…

iframe懒加载_前端常见问题

原地址&#xff1a;https://blog.csdn.net/Mr_JavaScript/article/details/843110681. flex布局&#xff1a;又叫做弹性布局任何一个容器都可以指定flex布局&#xff0c;如display:flex 或 display:inline-flex注意&#xff1a;设置了flex布局以后&#xff0c;子元素的float&am…

手机运行服务器无响应,《最强蜗牛》服务器无响应怎么办 服务器无响应解决方法...

导读最强蜗牛服务器无响应怎么办&#xff1f;本作在今日迎来了正式的公测&#xff0c;这会导致大批量的玩家同时涌入进来&#xff0c;而服务器也因此而遭受到了非常大的符合&#xff0c;所以会导致后续加入进来的玩家出现服务器无响应进不去的现象。下面就为大家带...最强蜗牛服…

自己动手写操作系统--个人实践

近期開始看于渊的《自己动手写操作系统》这本书&#xff0c;刚開始看就发现做系统的引导盘居然是软盘&#xff01;心里那个汗啊&#xff01; 如今都是U盘了&#xff0c;谁还用软盘。于是考虑用U盘。 于是開始下面步骤&#xff1a; 1、既然书上说给先要把软盘做引导盘&#xff0…

sql加上唯一索引后批量插入_阿里大佬总结的52条SQL语句性能优化策略,建议收藏...

你知道的越多&#xff0c;不知道的就越多&#xff0c;业余的像一棵小草&#xff01;你来&#xff0c;我们一起精进&#xff01;你不来&#xff0c;我和你的竞争对手一起精进&#xff01;编辑&#xff1a;业余草cnblogs.com/SimpleWu/p/9929043.html推荐&#xff1a;https://www…

Web缓存技术

本章导读 缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈&#xff0c;所以读取大容量数据时&#xff0c;使用缓存来直接为客户端服务&#xff0c;可以减少客户端与服务器端的数据交互&#xff0c;从而大大提高程序的性能。 本章从缓存所在的命…

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

弧度一块可能有误&#xff0c;需要再研究 导航 【初探HTML5之使用新标签布局】用html5布局我的博客页&#xff01; 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像&#xff08;上&#xff09;】看我canvas元素引领下一代web页面 【HTML5初…

关卡 动画 蓝图 运行_UE4入门之路(基础蓝图篇):蓝图的制作

蓝图系统简介蓝图系统是UE4中十分有代表性的一个特点&#xff0c;所谓蓝图就是一种可视化的脚本。该系统非常灵活且非常强大&#xff0c;因为它为设计人员提供了一般仅供程序员使用的所有概念及工具。 程序员能够很方便的创建一个基础系统&#xff0c;并交给策划进一步在蓝图中…

虚拟串口服务器zenetmanager,Avocent服务器/串口管理 KVM

MergePoint Unity交换机在单个设备中结合了 KVM over IP和串行控制台管理技术。这项独特的结合为IT管理员提供了用于访问和控制服务器、网络设备及其他数据中心和分支办公室设备的完整远程管理解决方案。MergePoint Unity交换机直接与物理KVM、USB和串行端口进行安全的远程带外…

KAFKA分布式消息系统

Kafka[1]是linkedin用于日志处理的分布式消息队列&#xff0c;linkedin的日志数据容量大&#xff0c;但对可靠性要求不高&#xff0c;其日志数据主要包括用户行为&#xff08;登录、浏览、点击、分享、喜欢&#xff09;以及系统运行日志&#xff08;CPU、内存、磁盘、网络、系统…

jar打包 剔除第三方依赖以及它的依赖_面试官:为什么Spring Boot的jar可以直接运行?...

来源&#xff1a;Gormats Notesfangjian0423.github.io/2017/05/31/springboot-executable-jar/Spring Boot Loader抽象的一些类JarLauncher的执行过程关于自定义的类加载器LaunchedURLClassLoaderSpring Boot Loader的作用SpringBoot提供了一个插件spring-boot-maven-plugin用…

CQRS架构图

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/darkness/blog/814243

Analyzer普通用户登录不了[从网络访问此计算机]

问题&#xff1a; 最近客户诺奇反映说Analyzer普通用户登录不了&#xff0c;但是发现管理员又可以登录&#xff0c;几经周折发现原来是系统的本地安全策略设置了不让远程使用本地账户密码登录系统导致。解决方案&#xff1a; 修改本地安全策略的“从远程访问此计算机”中的用户…

源码 移植_FreeModbus移植总结

modbus是一项工业上经常用到的通讯协议&#xff0c;而freemodbus是一款开源的从机协议栈。关于它的移植网上已经有了很多的文章&#xff0c;但是大多都只是针对其中部分问题的表述。本文将会把自己在移植freemodbus过程中遇到的问题以及freemodbus的源码分析尽量表述清楚。&…

word标题大纲级别_快速按标题层级把Word转Excel—附详细操作步骤

如何快速把层级分明的word文档转换成横向从属结构的excel表格一、问题描述文档如下图所示。文档一共三个层次&#xff0c;大纲级别分别是1、2、3级&#xff0c;左则是其文档结构图&#xff0c;可以看出文档层级分明。最终要将文档转换成如下横向从属结构的表格。一个层次的内容…

servlet中getWriter和getOutputStream的区别

getWriter();getOutputStream();区别&#xff1a;1、getWriter()用于向客户机回送字符数据2、getOutputStream()返回的对象&#xff0c;可以回送字符数据&#xff0c;也可以回送字节数据&#xff08;二进制数据&#xff09;如何选择&#xff1a;若果我们回送字符数据&#xff0…

execve系统调用_张凯捷—系统调用分析(3) (基于最新Linux5.0版本系统调用日志收集系统)...

在上一篇文章《系统调用分析(2)》中介绍和分析了32位和64位的快速系统调用指令——sysenter/sysexit和syscall/sysret&#xff0c;以及内核对快速系统调用部分的相关代码&#xff0c;并追踪了一个用户态下的系统调用程序运行过程。本篇中将基于最新的Linux-5.0内核&#xff0c;…

批量下载小说网站上的小说(python爬虫)

随便说点什么 因为在学python&#xff0c;所有自然而然的就掉进了爬虫这个坑里&#xff0c;好吧&#xff0c;主要是因为我觉得爬虫比较酷&#xff0c;才入坑的。 想想看&#xff0c;你可以批量自动的采集互联网上海量的资料数据&#xff0c;是多么令人激动啊&#xff01; 所以我…

华为欧拉系统服务器开接口,华为操作系统 euleros

华为操作系统 euleros 内容精选换一换Atlas 900 AI集群安装上架、服务器基础参数配置、安装操作系统等操作&#xff0c;请根据集群配置参见对应的手册&#xff1a;《Atlas 900 PoD 用户指南 (型号9000, 直流)》《Atlas 900 PoD 用户指南 (型号9000, 交流)》《Atlas 900 计算节点…

对勾函数_对勾函数?2020福建省中考压轴题分析

训练营机密视频大公开欢迎转发、分享传播知识&#xff0c;传播力量&#xff01;福建也是全省统一考选择题&#xff1a;这题考的是二次函数的性质&#xff0c;先求出对称轴就好了填空题&#xff1a;这题看似有反比例&#xff0c;确实会用到反比例函数的对称性。但其实重点是考察…