CSS 问题：背景颜色（高度：100%）和边框之间的差距

Question

我正在尝试制作一个有 2 个 <div> 区域的体验栏。 <div> 框架外部越长，当前体验内部越短。

当我使用 {height: 100%} for inside <div> 填充 space 时，当我将浏览器的显示尺寸更改为某些特定的 %.

我在 chrome 和 edge 浏览器中试过了，他们有同样的问题。我可以通过更改 {height: 101%} 来弥补差距。我只是想知道为什么在某些特定的显示尺寸下会有 100% 的差距。

* {
  box-sizing: border-box;
}

#bar-frame {
  background-color: grey;
  border: solid 13px black;
  height: 70px;
  width: 300px;
  border-radius: 5px;
}

#bar {
  background-color: black;
  height: 100%;
  width: 20%;
}

<body>
  <div id="bar-frame">
    <div id="bar"></div>
  </div>
</body>

我希望栏中没有间隙，但在某些特定的显示尺寸下会出现间隙。

CODEPEN link: https://codepen.io/ququ929/pen/zQWrZQ

英语是我的第二语言，希望你能理解问题，谢谢。

picture to show the problem

picture 2

what I expect for all display size.

Answer 1

在 #bar CSS 中添加 border: 1px solid grey 将解决您的问题。谢谢

#bar {
  background-color: black;
  border: 1px solid grey;
  height: 100%; width: 20%;
}

CSS 问题：背景颜色（高度：100%）和边框之间的差距

CSS problem: Gap between background-color (height: 100%) and border

css

height

border

background-color