Почему существует вертикальная полоса прокрутки, если у родителя и ребенка одинаковая высота?

Мне нужны мои .sideBar и .contentHolder элементы внутри .displayContainer.

Проблема заключается в том, что .displayContainer создает ненужную вертикальную полосу прокрутки. Горизонтальная полоса прокрутки в порядке, но нет необходимости в вертикальной полосе прокрутки.

Я проверил и обнаружил, что элементы .displayContainer и дочерние элементы имеют одинаковую вычисленную высоту. Итак, почему существует вертикальная полоса прокрутки?

Может кто-нибудь дать мне идею, как удалить его?

body, html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
  width: 100%;
}
.displayContainer {
  height: 100%;
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}
.sideBar {
  background-color: green;
  display: inline-block;
  width: 20%;
  height: 100%;
}
.contentHolder {
  background-color: red;
  display: inline-block;
  width: 100%;
  height: 100%;
}
<div class="displayContainer">
  <div class="sideBar"></div>
  <div class="contentHolder"></div>
</div>

Ответы

Ответ 1

Краткий ответ

В CSS вы столкнулись с одним из самых сложных настроек: vertical-align: baseline

Переключите значение в top, bottom или middle, и все должно быть установлено.

Описание

Начальное значение свойства vertical-align, которое применяется к элементам на уровне строки и таблицы, составляет baseline. Это позволяет браузерам предоставлять пространство ниже элементов для так называемых descenders.

В типографике строчные буквы, такие как j, g, p и y, называются descenders, потому что они нарушают базовую линию.

базовый уровень

Базовая линия - это линия, на которой сидят большинство букв и ниже которых расширяются ограничители.

enter image description here

Источник: Wikipedia.org

Поскольку все элементы линейного уровня по умолчанию vertical-align: baseline, такие элементы, как button, input, textarea, img и, как и в вашем коде, inline-block divs, будут слегка приподниматься от нижнего края их контейнера.

введите описание изображения здесь

Источник: Wikipedia.org

Это пространство descender добавляет высоту внутри контейнера, что вызывает переполнение и вызывает вертикальную прокрутку.

Вы можете увидеть пространство descender, прокрутив в нижней части demo. Вы заметите небольшой зазор между дочерними элементами и нижним краем.

Вот несколько способов справиться с этим:

  • Переопределить vertical-align: baseline с помощью vertical-align: bottom (или другое значение).

  • Переключитесь с display: inline-block на display: block.

  • Задайте a line-height: 0 для родителя.

  • Установите a font-size: 0 для родителя. (При необходимости вы можете восстановить размер шрифта для детей.)

Ответ 2

Я считаю, что причина, по которой отображается вертикальная полоса прокрутки, заключается в том, что есть горизонтальная полоса прокрутки. Поскольку горизонтальная боковая панель закрывает часть нижней части каждого div, 100% высоты div не видны, поэтому она добавляет вертикальную полосу прокрутки, чтобы вы могли видеть все содержимое.

Если в последние 20px или около того ничего не будет (честно говоря, этого не должно быть), то работа вокруг этого Dhaval предполагает (добавление переполнения: hidden, в ваш css) должно быть хорошо.

Если вы хотите увидеть контент до конца, вы можете попробовать использовать абсолютные значения или просто изменить 100% -99%