admin管理员组文章数量:1610907
方法1:
下方的元素第一个设置 margin-top为fixed元素的高度即可。
方法2:
在fixed元素后添加一个空的div盒子,并将高度设置为fixed元素的高度。
延伸扩展:如果fixed元素的高度不确定,该如何处理?
需要 动态获取盒子高度 并 监听 其变化,然后 动态设置元素的style。
<div>
<div id="header" style="position: fixed">
//设置fixed的元素
</div>
<div :style="{'height':topHeight}">
// 空的div,动态设置高度为fixed的元素的高度 topHeight
</div>
</div>
mounted() {
// 获取导航条高度
this.getHight()
// 并 监听其高度变化
window.addEventListener('resize', this.getHight);
}
methods: {
// 获取导航栏高度
getHight() {
this.topHeight = document.getElementById("header").clientHeight + "px"
},
}
// 销毁监听
destroyed() {
window.removeEventListener('resize', this.getHight)
},
为什么突然深究这个问题呢?其实是因为突然遇到了一个诡异的问题:
缩小浏览器窗口/ 将页面放大/ 屏幕分辨率过低导致 页面假死,浏览器崩溃。
搜索网上很多说是element-ui或者是vue的版本不匹配问题,要降低element-ui版本?但是对我的问题好像不太凑效,后来通过排查发现是我的导航栏的高度设定了固定高度,但是缩小浏览器宽度后组件被挤压下来,影响到了el-tabs的布局,导致重新渲染崩溃了。所以并不是el-tabs组件有的问题,而是其他组件对它造成了影响。所以我只好把导航条给做好点了。有句话很深刻:我有毒却不害人,但是你碰我一下你就得挂。我觉得很在理哈哈哈哈。。
版权声明:本文标题:vue 解决position:fixed 遮盖下方元素问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728605688a1165420.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论