我正在创建一个动画,其中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;
}@H_301_10@
@H_301_10@
如果您想要可视化,请检查我的Codepen：
http://codepen.io/sentedelviento/pen/NRGbya
左侧col没有间隙,并且似乎与右侧col相同,除了未设置剪辑路径.当我切换并将剪辑路径设置为左列时,这种不需要的行为会继续.还有一个差距.为什么？