我正在创建一个动画,其中div从插入路径(100％0 0 0)向上滚动到插入(0 0 0 0).但是,div的底部和父容器之间会出现一个小间隙.父母的位置是相对的,孩子的身高是100％.如果我查看开发人员的工具并检查子项和父项的高度,它们都匹配.
差距来自哪里？
body {
height: 100%;
width: 100%;
margin: 0 auto;
}
#main {
overflow: auto;
height: 64vh;
width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
border: 1vh solid black;
overflow: hidden;
}
#left-col {
float: left;
width: 4%;
height: 100%;
margin-left: 46%;
background: black;
}
#right-col {
float: left;
width: 4%;
height: 100%;
margin: 0 auto;
margin-left: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
background: black;
}如果您想要可视化,请检查我的Codepen：
http://codepen.io/sentedelviento/pen/NRGbya
左侧col没有间隙,并且似乎与右侧col相同,除了未设置剪辑路径.当我切换并将剪辑路径设置为左列时,这种不需要的行为会继续.还有一个差距.为什么？
最佳答案
我不能告诉你为什么,但它看起来像一个webkit bug -webkit-clip-path,据我所知,只发生在Chrome中(我在Firefox,IE,Opera和Chrome上测试过它).
尝试替换webkit -webkit-clip-path：inset(0％0％0％0％); with -webkit-clip-path：rect(0％0％0％0％);
或者： – webkit-mask-clip
甚至只是删除它.
