Можно ли реализовать такой макет в верстке?

Question

[Илья]

Всем привет, возник вопрос: возможно ли как-то реализовать данный макет на картинке? Без использования JS, просто CSS.

Есть основной блок страницы в 1200px, выравненный по центру. Относительно некой оси (синего цвета) необходимо разделить ВСЮ ширину окна браузера на 2 части (желтая и красная). Проблема в том, что эта ось проходит не по центру, а если задать желтому и красному блокам ширину в процентах, то эта ось будет передвигаться при изменении окна браузера, она должна быть неподвижной относительной других элементов основного блока страницы. Надеюсь, вы меня поняли, надеюсь на помощь). Если идей нет на CSS, подскажите, как это сделать на JS.

Answer 1

[Антон Спирин]

Вот простой вариант решения https://jsfiddle.net/rockon404/q2kpasfu/

Comments

[Илья]

Спасибо, завтра проверю.

[ой всё]

круто

[Илья]

Ну да, calc в принципе подойдет, обычно им не пользуюсь, вот и забыл, а тут он хорошо подойдет) спасибо)

Answer 2

[Troodi Larson]

На js можно реализовать таким образом: ловим скролл страницы и на соответственное количество пикселей сдвигаем задний фон. Измеряйте сверху страницы расстояние. Запоминайте предыдущее значение, чтобы понимать куда идет скролл.

Comments

[Илья]

Вы наверное меня немного не так поняли, это не фон, а полноценные блоки, зачем тут скролл?

[Troodi Larson]

Зачем блоки выходят за пределы экрана?

[Илья]

Troodi Larson, они и не выходят, у вас, допустим, монитор 1920px, в центре вы видите 1200px, а вот желтый и красный блоки составляют 100% ширину от вашего монитора, т.е. 1920px. Горизонтального скролла быть не должно. Пока рассматривается вариант ширины окна > 1200px.

Answer 3

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

Не очень понял как должно себя вести если экран меньше 1200px. Давайте начнем с такого варианта https://codepen.io/aliencash/pen/pdXrry?editors=1100

Comments

[Антон Спирин]

grid пока только так
@supports (display: grid) { ... }

[Илья]

Спасибо, Андрей, так и думал, что можно на гридах, просто пока с ними очень слабо знаком. Вообще, я не уверен, что мне это подходит, смотрите: часть желтого блока, та, что в блоке страницы, делится на 2 части, верхнюю и нижнюю (это при размере окна > 1200px), а когда < 1200px, то блоки перестраиваются: сначала идет верхняя часть блока, потом синяя часть целиком, а потом нижняя часть желтого блока. При том, что эта центральная часть только на главной странице, получается всем страницам кроме главной надо сбрасывать темплейт гридов. В общем, я немного в растерянности от это задачи, не знаю, как к ней подобраться.. Не уверен. Что гриды тут удобны, как вы считаете?

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

Илья, честно говоря ваше текстовое описание непонятно чуть менее чем полностью. может несколько картинок нарисуете, для разной ширины?

[Илья]

Андрей Федоров, я понимаю) возможно, вариант Антона Спирина подойдет, я завтра проверю, если нет, сделаю подробный вопрос, спасибо)