当前位置: 首页 > Web前端 > CSS

关于华为虚拟操作键收起后页面高度不会刷新问题的总结

时间:2023-03-31 02:07:40 CSS

华为虚拟操作键收起后页面高度不刷新问题总结屏幕高度减去banner高度赋值给底部高度。这时会出现用虚拟键盘输入,然后关闭虚拟键盘,底部留空的结果;代码如下:setHeigh(){varbodyTop=document.body.offsetHeight||文档.documentElement.offsetHeight;varbannerH=文档。getElementsByClassName('issue_banner')[0].offsetHeight;函数getStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returndocument.defaultView.getComputedStyle(obj,null)[attr];}}varmarginTop=getStyle(_this.$refs.wrap,'marginTop');_this.$refs.wrap.style.height=bodyTop-bannerH-marginTop.replace(/px/i,'')+'px';}解决方案:合并position:absolute;属性来限制底部元素的高度。bottom_box加上底部定位和顶部定位给出了元素高度。此时js只需要动态获取banner的high值赋值给底部的top属性即可。.bottom{位置:绝对;宽度:100%;上边距:0.12rem;背景:#FFFFFF;溢出:隐藏;底部:0;}setHeight:function(){var_this=this;varbannerH=document.getElementsByClassName('issue_banner')[0].offsetHeight;_this.$refs.wrap.style.top=bannerH+'px';},