Question

我正在尝试创建一个面积为2 <div>的体验栏。对于当前的体验，<div>的外部边框较长，而内部的则较短。

当我在<div>内部使用{height：100％}来填充空间时，当我将浏览器的显示尺寸更改为某些百分比时，边框和背景色之间会出现间隙。

>

我在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链接：https://codepen.io/ququ929/pen/zQWrZQ

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

picture to show the problem

picture 2

what I expect for all display size.

Answer 1

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

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

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

1 个答案: