Почему VW делает нижнюю прокрутку страницы при растягивании дочернего блока?

Question

[Даниил Конев]

Сообственно у меня контейнер 1200px, есть блоки которые нужно растянуть на всю ширину, растяжку делаю по методике найденной тут:

position: absolute;
    z-index: 1;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;

Проблема в том, что проверяю на 1366px и на 1920px все норм, но у меня ноут 1600 × 900 и разрешение точное 1583 × 784 . У меня внизу появляется скролл.... Почему ? Как это пофиксить ? Это Яндекс.Браузер. Пока из вариантов ставить на медиа width: 99.45vw; , но это прям костыль какой-то.... Может есть какие нибудь другие решения растяжки блока ?

Кусочек мой верстки тут: https://danil-konev.ru/ - Блок Выполненные работы .work_bg

Comments

[Андрей Федоров]

А зачем вы фоновую картинку вставляете через тэг img? Это что за бред? И какие не нужные position absolute из-за этого... Переделайте на css background, тогда приходите с вопросами.

Answer 1

[Danny Arty]

Именно для вашего случая. Но я бы на вашем месте это по другому реализовал, как минимум картинку бы сделать бэкграундом, а не вставлять с помощью тега img. Она ведь не относится к содержанию страницы и не имеет никакой смысловой нагрузки

html, body{
height: auto;
width: 100%;
overflow-x: hidden;
}

Comments

[Даниил Конев]

Сработало спасибо, по бэкраунду согласен, переделаю

Answer 2

[Сергей delphinpro]

Проблема в том, что 100vw включает в себя полосу прокрутки.
Вот здесь я решал похожую задачу https://qna.habr.com/q/616576.