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进行拖拽
Jul 20 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
深入探究node之Transform
Jul 20 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 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
2006/12/14 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
destoon复制新模块的方法
2014/06/21 PHP
orm获取关联表里的属性值
2016/04/17 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
灰雀教学反思
2014/04/28 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
群众路线对照检查材料
2014/09/22 职场文书
欢迎词怎么写
2015/01/23 职场文书
婚庆司仪开场白
2015/05/29 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫