Вёрстка двух блоков разной ширины с разными фонами до краёв экрана — как?

Question

[Боб Семович]

Как вообще такое сверстать?
Макет из 12 колонок - bootstrap. Если бы блоки из макета были бы равного размера, то это можно было бы реализовать. Но здесь... В общем, как вообще такое сверстать господа???

Comments

[Rustam Bainazarov]

CSS Как правильно верстается такое, когда элементы выходят за каркас?

Словом, рыжий блок на абсолютное позиционирование.

Answer 1

[Вадим Кот]

Так нужно?

https://codepen.io/web-tech/pen/zVRxeW

Comments

[Боб Семович]

Вы прекрасно всё сделали, но к сожалению такой вариант я не могу использовать и вот почему:



Когда у экрана по каким-то причинам становится нечётное кол-во пикселей, появляется белая линия в 1 px, к тому же иногда появляется горизонтальный скролл.

[Вадим Кот]

Comrues, В таком случае (чтобы побороть нечетное колво пикселей), подвинуть after на 1px
вместо left: 100%; сделать left: calc(100% - 1px)

https://codepen.io/web-tech/pen/jjZbpo

[dom1n1k]

Горизонтальный скролл там будет появляться совершенно ожидаемо. Именно поэтому я и написал в соседнем ответе, что это не очень корректное решение. Причина в том, что 100% != 100vw.

Answer 2

[Beliyadm]

Вынести эти блоки за пределы сетки бутстрапа, сделать два дива с нужными процентами и дальше продолжить сетку?

Comments

[Боб Семович]

Это не верное решение. Как ты определишь "нужные проценты"?
Проценты ширины колонки в бутстрапе (col-1) высчитываются не от ширины экрана, а от ширины контейнера (.container). Соответственно 70% относительно ширины экрана и 70% относительно ширины контейнера (.container) закончатся в разных местах, поскольку в ширину контейнера не включены его отступы (margin-left: auto; .margin-right: auto;)

[dom1n1k]

Ширина контейнера известна, количество и параметры колонок известны, ширина окна тоже (100%) - calc в руки и вперед.

[Beliyadm]

Comrues, Да, уже понял, сразу не очень верно оценил задачу.
Если высота этих блоков одинакова и известна - можно попробовать абсолютное позиционирование для подложек. Делал так пару раз подобные вещи, как-то другого решения не придумал, решил в лоб

[dom1n1k]

Еще бывает делают примерно так:

.orange-block {
    margin-left: calc(-1 * (100vw - 1200px) / 2);
}

Где вместо 1200px подставить свою ширину контейнера.
Но это не совсем корректное решение.