admin管理员组文章数量:1611968
position:fixed定位的元素,宽度超出，怎么解决？
最近做项目时，用fixed固定在窗口底部时，发现宽度超出。
因为整体布局为左右结构，父元素采用flex布局。左侧固定宽度，右侧填充。
右侧头部需要固定显示，下面内容可以滚动，width设置为100%时，发现超出父元素。
初步解决方案：
.header {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #cecece;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
position: fixed;
width: calc(100% - 435px);
}
虽然暂时解决问题，但是如果左侧的需求为可以伸缩。。。。
上述的方案就不能满足我们的需求了
解决方案2（使用与自适应已vue为例）：
思路:我们可以通过css属性中transform中的translate进行移动，元素设置为position: relative，不让其脱离文档流，这样子我们就能保证子元素和父元素宽度一致了，那我们如何动态的获取元素需要移动多少呢？
我们可以监听我们的滚动条获取到实时的需要移动的top值，这样子就模拟实现了fixed的效果，同事满足子元素可以自适应父元素的宽度
下面是基本思路的代码（本人亲测引用与项目中有效）
//dom部分
<div
class="content-footer"
id="content-footer"
style='position: relative;'
:style="`transform: translate(-1px, ${contentFooterTop}px)`"
>
</div>
//vue部分
mounted() {
let self = this;
window.onresize = function () {//当屏幕变化的时候要重新计算不然会出问题，因为滚动高度会变
self.scrollTop = -(
document.documentElement.scrollHeight -
(document.documentElement.clientHeight || document.body.clientHeight)
this.scrollFun()
);
};
this.scrollTop = -(
document.documentElement.scrollHeight -
(document.documentElement.clientHeight || document.body.clientHeight)
);
this.contentFooterTop = this.scrollTop;
window.addEventListener('scroll', () => {//记得销毁监听
this.$nextTick(() => {
this.scrollFun()
});
});
},
method:{
scrollFun(){
this.contentFooterTop =
Number(document.documentElement.scrollTop || document.body.scrollTop) -
Number(-this.scrollTop);
let clientHeight = document.documentElement.clientHeight;
let scrollHeight = document.documentElement.scrollHeight;
}
}
上面本人亲测，给需要的朋友参考，减少踩空时间
版权声明：本文标题：子元素使用position:fixed后宽度不能和父元素保持一致问题的解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728604883a1165325.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论