Когда я помещаю рамку в div, который занимает 100% высоты (высота: 100vh), показывается вертикальная прокрутка, как удалить вертикальную прокрутку?

Question

У меня была эта проблема в течение достаточно долгого времени, и я не знаю, как ее исправить. Если я удаляю границу, прокрутка исчезает, и это то, что я хочу, но если у моего div есть граница, появляется вертикальная прокрутка. Я хотел бы сохранить мой div с соответствующей границей. Как я могу решить это?

div{
 height:100vh;
 background:yellow;
 border:1px solid red;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>

Answer 1

Вероятно, есть несколько способов справиться с этим. По умолчанию box-sizing установлено на content-box. См .: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Так что если у вас есть div, равный 100vh, то добавление границы добавит ширину верхней границы плюс ширину нижней границы к общая высота. Таким образом, вы получаете свиток.

Вы можете установить div на box-sizing: border-box, как показано ниже:

div{
 height: 100vh;
 background:yellow;
 border:1px solid red;
 box-sizing: border-box;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>

Или вы можете учесть любой интервал границы или другой интервал, который влияет на общую высоту, используя функцию calc для вычитания дополнительной высоты из итого, например height: calc(100vh - 2px);, как показано ниже:

div{
 height: calc(100vh - 2px);
 background:yellow;
 border:1px solid red;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>