首页 > 其他 > 详细

position:absolute 与overflow:auto的奇葩之旅

时间:2020-07-04 19:35:13      阅读:63      评论:0      收藏:0      [点我收藏+]
问题:
 
       平常我们大多数做移动端开发,会有只占一屏且不滚动的页面,css属性设置 width:100%,height:100%,或者(width:100vw; height:100vh),
      经常头部 +内容 +底部,这样三栏的经典布局,然后内容超过一定高度之后,设置overflow:auto,内容自适应滚动,
      但是如果其子元素里面设置了position:absolute,且没有left right top bottom值,且祖父级没有relative相对定位,那么此时会出现内容超过height:100vh的bug,
       小伙伴们是不是也经常遇到这种问题?当我们遇到这种问题应该如何解决呢?
 
技术分享图片

 

技术分享图片

 

 

 

请看这里解决方法:

  1. 给其父元素设置 relative;
  2. 给自身absolute的定位设置  top:0,  left:0; 我们开发的时候一定要注意了,不要省略这两个属性值。
  3. 给body设置overflow:hidden,因为此时此刻的absolute是相对于body的定位,且不受父级的overflow控制,受body的overflow控制。

 

position:absolute 与overflow:auto的奇葩之旅

原文:https://www.cnblogs.com/tanwanwan2017/p/13236110.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!