使用flex的垂直居中对齐，隐藏overflow后部分顶部滚动区域无法显示问题的解决

时间：2023-03-29 13:10:28 HTML

先画一个测试用的页面html这是head

这个是body，宽高500px

less.container{position:relative;高度：100%；.head{边框：1px纯红色；}.body{边框：1px纯绿色；高度：计算（100%-24px）；显示：弹性；证明内容：居中；汽车;.body-container{border:1px纯蓝色;宽度：500px；高度：500px；.text{背景颜色：#d9d7d7;从其他页面样式可以看到，页面会根据浏览器窗口大小自动调整大小，并且中心蓝框区域始终在容器中水平和垂直居中，但是随之而来的一个问题是，蓝框区域顶部页面的部分是灰色背景。当页面高度不够时，会溢出隐藏，但滚动到顶部后仍无法显示，这是flex带来的bug。解决方案是在使用flex的容器内的元素上添加margin:auto样式。另外，如果是动态组件生成的组件，是不能直接给对应的容器添加样式的。可以在动态组件中获取对应的组件对象，然后使用Renderer2的setStyle()方法添加对应的样式，代码如下constcomponentFactory=这个。componentFactoryResolver.resolveComponentFactory(adItem.component);constviewContainerRef=this.adHost.viewContainerRef;viewContainerRef.clear();constcomponentRef=viewContainerRef.createComponent(componentFactory);(componentRef.instance).data=;/只看下面这行代码rendererisRenderer2this.renderer.setStyle(componentRef.location.nativement,'margin','auto')}这样就可以给动态组件添加样式了。

上一篇：环保减排绿色产业：数字孪生垃圾焚烧发电站_0

下一篇：解决图片底部白边

使用flex的垂直居中对齐，隐藏overflow后部分顶部滚动区域无法显示问题的解决相关文章