0

появляется горизонтальная прокрутка при выставленном на .container-1 height в 100vh, при значении меньше все нормально. Почему так происходит?

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: black;
  color: #fff;
}

.container-1 {
  height: 100px;
  width: 100vw;
}
<div class="wrapper">
  <div class="container-1">
    Content-1
  </div>  
  <div class="container-2">
    Content-2
  </div>
</div>

1 ответ 1

2

100vw берет всю ширину окна браузера, но поскольку у вас container-2 уезжает под container-1, появляется еще вертикальная прокрутка, которую 100vw не учитывает. В итоге получается смещение и скролл

Попробуйте для container-1 поставить например height: calc(100vh - 50px); (чтобы оба блока влезли в экран), увидите, что горизонтальный скролл пропадет вместе с вертикальным

В качестве решения можно на wrapper прописать overflow-x: hidden;, но тут уже зависит от Ваших конкретных целей на верстку.

Кстати, по-умолчанию div-блок занимает всю доступную ширину (если это не переопределено), так что можете просто убрать 100vw, и все будет ок

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.