Полноэкранный div с полосой прокрутки

Question

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

#fullScreen
{
  position: absolute; 
   text-align: left;
   left: 0px;
   top: 0px;
   width: 100vw;
    height: 100vh;
   z-index: 5;
   background-color: #FFDAB9;
   border: 4px solid #FF0000;
   border-radius: 10px;
}

Answer 1

Вы должны прочитать о блочной модели CSS .

Проблема в том, что граница рассматривается вне элемента.Таким образом, ваш элемент имеет ширину / высоту 100vh + 8px.8px из значений границы 4px.

Вы можете легко исправить это, добавив box-sizing:border-box, чтобы ширина границы была включена в элемент

Смотри ниже

#fullScreen {
  position: absolute;
  text-align: left;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #FFDAB9;
  border: 4px solid #FF0000;
  border-radius: 10px;
  box-sizing:border-box;
}

<div id="fullScreen">

</div>

Answer 2

Я думаю, что проблема связана с увеличенным размером границы, т.е. 4px, поэтому просто попробуйте это

#fullScreen
{ 
margin: 0px; 
position: absolute; 
text-align: left; 
left: 0px; 
top: 0px; 
width: calc(100% - 8px); 
height: calc(100% - 8px);
z-index: 5;
background-color: #FFDAB9; 
border: 4px solid #FF0000; 
border-radius: 10px;
}