Блог

Главная - Вопросы по программированию - Почему этот контейнер расширяется за пределы области просмотра?

Почему этот контейнер расширяется за пределы области просмотра?

#html #css

#HTML #css

Вопрос:

У меня есть контейнер, который содержит 4 цветных блока. Я изменил размер контейнера на 27 пикселей от верхней части области просмотра и на 2% слева (это работает). Однако я хочу, чтобы правая и нижняя стороны этого контейнера останавливались на области просмотра, но вместо этого он выходит за ее пределы.

Таким образом, блоки в приведенном ниже примере немного выходят за пределы области просмотра.

Что я делаю не так?

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

У меня такое чувство, что это связано с самим контейнером-оболочкой, в частности с height and width , поскольку он учитывает поля, которые я ему дал, при этом все еще имея 100% высоту и ширину, но я не уверен.

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

 body {
  margin:0;
  padding:0;
  overflow: hidden;
  
}


#wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-top: 27px;
  margin-left: 2%;
}

.square {
  position: absolute;
  width: 50%;
  height: 50%;
}

#square1 {
  top: 50%;
  left: 0;      
  background-color: blue;
}

#square2 {
  top: 50%;
  left: 50%;      
  background-color: yellow;
}

#square3 {
  top: 0;
  left: 0;      
  background-color: green;
}

#square4 {
  top: 0;
  left: 50%;      
  background-color: red;
}  
 <div id="wrapper">
  <div id='square1' class="square"></div>
  <div id='square2' class="square"></div>
  <div id='square3' class="square"></div>
  <div id='square4' class="square"></div>
</div>

Комментарии:

1. 100%vw недопустимо…

2. Спасибо, я исправил это, хотя это не решает проблему. Это была просто синтаксическая ошибка.

3. ну, вы добавляете запас в дополнение к ширине / высоте, чтобы у вас логически было переполнение. Вам нужно уменьшить ширину / высоту на величину поля

Ответ №1:

Вы можете использовать calc для учета поля:

 body {
  margin:0;
  padding:0;  
}


#wrapper {
  position: relative;
  width: calc(100vw - 2%);
  height: calc(100vh - 27px);
  margin-top: 27px;
  margin-left: 2%;
}

.square {
  position: absolute;
  
  width: 50%;
  height: 50%;
}

#square1 {
  top: 50%;
  left: 0;
  
  background-color: blue;
}

#square2 {
  top: 50%;
  left: 50%;
  
  background-color: yellow;
}

#square3 {
  top: 0;
  left: 0;
  
  background-color: green;
}

#square4 {
  top: 0;
  left: 50%;
  
  background-color: red;
}  
 <div id="wrapper">
  <div id='square1' class="square"></div>
  <div id='square2' class="square"></div>
  <div id='square3' class="square"></div>
  <div id='square4' class="square"></div>
</div>

Ответ №2:

Поля добавляются к width heigth свойствам и, поэтому высота 100vh плюс поле в 27 пикселей приведет к тому, что нижняя часть элемента будет на 27 пикселей ниже нижней части области просмотра. Чтобы избежать этого, вы можете использовать height: calc(100vh - 27px) .