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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
解决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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php强制下载文件函数
2016/08/24 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
小程序实现留言板
2018/11/02 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python 3 判断2个字典相同
2019/08/06 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python str字符串转uuid实例
2020/03/03 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
2014年食品安全工作总结
2014/12/04 职场文书
六年级学生期末评语
2014/12/26 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书