Как растянуть секцию за контейнер, но содержимое секции оставлять в контейнере?

Question

[funkydance]

Здравствуйте.

Как растянуть секцию за контейнер, но содержимое секции оставлять в контейнере?

Сайт, где это хочу реализовать - Ссылка Ссылка

Хочу сделать вот так, как на этом сайте - Ссылка



Средствами css это не реализовать как я понял, а как на js реализовать?

Спасибо.

Comments

[Вадим]

?

[funkydance]

Вадим, Совсем не то, разметка иная у двух сайтов, секции (содержимое внутри контейнера сразу).

[Вадим]

funkydance, тот сайт что Вы показываете как пример - у него отвратительная вёрстка.
Я вам показал пример как это можно сочетать.
Блок-контэйнер с ограниченой шириной, отцентрованый, в нём там дальше колонки могут быть.
Потом блок на всю ширину, с контэйнером внутри, внутри которого контент.

[funkydance]

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

[Вадим]

funkydance, ?

[Вадим]

funkydance, У вас просто сам шаблон страницы не совсем подходит под вёрстку, которую я предлагаю. Если Вы не можете так сделать, то можно попробовать на css grid этого добиться, например через grid-area.
Освоить базу по гридам в лёгкой интерактивной форме за 20 минут можно тут: https://cssgridgarden.com/#ru

[funkydance]

Вадим, По сути, вы разделили страницу на 2 части, сверхну всё внутри контейнера (сайдбар и правый контент) и далее вторая частья это секция с контейнером внутри.

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

[Вадим]

funkydance, Почему же не реализовать?
У wordpress есть файлы шаблонов страниц. Если Вам будет нужно делать такое переодически, то Вам нужно переписать шаблон страниц подходящим образом. Если Вам нужно сделать это один раз, только для этой страницы, и Вам не нужна поддержка старых браузеров, то сделайте через css grid один раз, добавив контэйнеру на этой странице класс-модификатор и всё.

[Вадим]

funkydance, но это варианты если Вы хотите сделать хорошо. А так да, js тоже может решить вопрос.

[funkydance]

Вадим, Я знаю гриды и как создавать шаблоны) Я просто уверен, что не реализовать это на css так как не будет возможности добавлять через тот же gutenberg контент так, чтоб один растягивался, а другой нет с сайдбаром и т.д. Ладно, пойду посплю и на свежую голову ещё раз перечитаю и решу проблему. Спасибо за помощь. Везде на вордпресс, где я видел такие смешанные страницы, везде это делается через JS.

[Ankhena]

Если нельзя менять разметку, делайте псевдоэлементом.
Задавайте ему ширину 100vw и позиционируйте.
На ближайшего родителя, имеющего ширину окна, не забудьте повесить overflow-x hidden.

[funkydance]

Ankhena, Мм, но как это поможет. Не догоняю. Это не растянет секцию за контейнеры и содержимое в секции не будет по ширине контейнера.

[Ankhena]

funkydance, содержимое где было, там и останется.
Фон будет на всю ширину окна.

[funkydance]

Ankhena, Вот тут и проблема. Содержимое находится в правом блоке (есть левый сайдабр и правый с контентом, оба они находятся внутри container), мне нужно чтобы содержимое из правого блока растягивалось на весь container + фон секции этот на всю ширину.

Как тут - https://centr-np74.ru/katalog/matovye-natyazhnye-p...

Но, тут через js реализовано, но не догоняю как.

[Ankhena]

funkydance, ну да, чуть сложнее будет посчитать координаты. Сути это никак не меняет.

[funkydance]

Ankhena,

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

Answer 1

[Ankhena]

funkydance,

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

relative, transform и ширину указать.

https://jsfiddle.net/2nh0xbvo/

Comments

[funkydance]

Боже, огромнейшее спасибо!
Это прям то что нужно!