最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue项目中公用footer组件底部位置的适配问题
时间：2022-06-25 16:06:16 编辑：袖梨 来源：一聚教程网
需求：
footer为公用组件，其他页面都需要引入，这是会存在一种情况：有的页面高度很高，footer组件要放在内容的最后；有的页面内容很少，高度很低，footer需要放在浏览器可视窗口的最底部；窗口高度的变化时，footer的位置需要重新调整。
可能有的伙伴首先想到的
position: fixed; bottom: 0;
这确实能解决页面内容不足以撑满浏览器高度的情况，但由于footer组件是公用的，在内容很多的页面调用时，会出现内容被组件覆盖的情况。
我最终的解决方案：
给内容不足以撑满浏览器可视高度的页面添加以下设置，通过动态（监测浏览器窗口变化）设置页面容器最低高度，也就是footer组件正常加载，只是footer的兄弟容器的高度变化了，自身的位置也会变化。
script:
template:
解释：
页面第一次mounted()时，计算footer组件兄弟容器user-message的最小高度，其中的170为顶部header加上footer自身的高度，随后给window添加窗口变化事件，回调函数重新计算minHeight的值，template中minHeight发生改变，footer的位置自然也就发生变化。
效果：
相关文章
- 哈利波特魔法觉醒拼图寻宝格兰芬多塔楼线索位置攻略 08-01
- 金铲铲之战中秋挑战活动怎么玩?中秋双人大作战玩法介绍 08-01
- 《魔法少女小圆MagiaExedra》月卡可获取奖励一览 08-01
- 《地下城堡4》军团战通关攻略 08-01
- 《地下城堡4》惊悸荒野小屋解密攻略 08-01
- 币圈三大主流交易所详解 币安 Coinbase 火币对比分析 08-01