Проблема CSS: разрыв между цветом фона (высота: 100%) и границей - PullRequest
Новая
       36

Проблема CSS: разрыв между цветом фона (высота: 100%) и границей

0 голосов
/ 24 мая 2019

Я пытаюсь создать панель опыта с площадью 2 <div>.чем длиннее <div> снаружи для кадра и короче внутри для текущего опыта.

когда я использую {height: 100%} для внутреннего пространства <div>, чтобы заполнить пространство, между границей и рамкой есть разрывbackground-color, когда я изменяю размер экрана браузера на какой-то определенный%.

Я пробовал это в браузере 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

Английский - мой второй язык, надеюсь, вы понимаете проблему, спасибо.

изображение, чтобы показать проблему

изображение2

что я ожидаю для всех размеров дисплея.

1 Ответ

0 голосов
/ 24 мая 2019

Добавьте border: 1px solid grey в вас #bar CSS решит вашу проблему.Спасибо 

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