vue项目中公用footer组件底部位置的适配问题


Posted in Javascript onMay 10, 2018

需求:

footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后;有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部;窗口高度的变化时,footer的位置需要重新调整。

可能有的伙伴首先想到的

position: fixed; 
bottom: 0;

这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况。

我最终的解决方案:

给内容不足以撑满浏览器可视高度的页面添加以下设置,通过动态(监测浏览器窗口变化)设置页面容器最低高度,也就是footer组件正常加载,只是footer的兄弟容器的高度变化了,自身的位置也会变化。

script:

vue项目中公用footer组件底部位置的适配问题

template:

vue项目中公用footer组件底部位置的适配问题

解释:

页面第一次mounted()时,计算footer组件兄弟容器user-message的最小高度,其中的170为顶部header加上footer自身的高度,随后给window添加窗口变化事件,回调函数重新计算minHeight的值,template中minHeight发生改变,footer的位置自然也就发生变化。

效果:

vue项目中公用footer组件底部位置的适配问题

总结

以上所述是小编给大家介绍的vue项目中公用footer组件底部位置的适配问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 #Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 #Javascript
vue计算属性和监听器实例解析
May 10 #Javascript
js正则相关知识点专题
May 10 #Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 #Javascript
Javascript Promise用法详解
May 10 #Javascript
jQuery实现模糊查询的方法分析
May 10 #jQuery
You might like
php正则表达式使用的详细介绍
2013/04/27 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
jQuery之字体大小的设置方法
2014/02/27 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
node后端服务保活的实现
2019/11/10 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python imread、newaxis用法详解
2019/11/04 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
英文自荐信
2013/12/15 职场文书
信息工作经验交流材料
2014/05/28 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
家长意见书
2015/06/04 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
初中团支书竞选稿
2015/11/21 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers