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

Question

[funkydance]

Добрый вечер.

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

<div class="container">
  <div class="block">
     это блок растягивается на всю ширину, а содержимое нужно оставить в пределах контейнера.
  </div>

</div>

.container {
width: 100%;
max-width: 1200px;
padding: 0 15px;
margin: 0 auto;
}

.block {
width:  100vw;
margin-left: -50vw;
left: 50%;
}

Answer 1

[Сергей delphinpro]

Ну элементарно же.
Если не создавать себе проблем, то и решать их не нужно будет.

<div class="block">
  <div class="container">
    это блок растягивается на всю ширину, а содержимое нужно оставить в пределах контейнера.
  </div>
</div>

Comments

[funkydance]

Ну если бы всё было так легко и просто))) У заказчика требование, страница натягивается на вордпресс и должна заполняться через админку и в любом месте можно было бы вставлять блок, который бы тянулся на всю ширину, а содержимое было в пределах контейнера.

Содержимое выводится в

<section class="content">
  <div class="container">
        содержимое из админки.

        <div class="block">содержимое</div>

            дальше просто текст

        <div class="block">Возможно ещё один такой блок</div>
  </div>
</section>

Есть вариант создавать в редакторе блок, задавать ему класс, а внутри ещё один блок с классом контейнер. Но, думаю заказчик будет не в восторге от этого. Хотелось бы чтоб он максимум задавал 1 класс блоку, а не мучался.

[Сергей delphinpro]

funkydance, ну тогда зафигачьте еще один контейнер внутри блока

<div class="container">
  <div class="block">
    <div class="container">
      это блок растягивается на всю ширину, а содержимое нужно оставить в пределах контейнера.
    </div>
  </div>
</div>

[Сергей delphinpro]

funkydance, Можно паддинги сделать через calc((100% - ширина_контейнера) / 2). Но тут придется на каждый брикпойнт их прописывать.

[funkydance]

Сергей delphinpro, Паддингами придётся делать, а так бы сделал конечно внутри блока ещё один контейнер, но заказчик не разберётся.

Спасибо за помощь)

Answer 2

[andand44]

Классический вопрос.
Выбрать подходящий способ отсюда https://css-tricks.com/full-width-containers-limit...
И сделать внутри этого блока container

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

<div class="full-width">
  <div class="container"></div>
</div>

Comments

[funkydance]

Спасибо, но чуточку не то. В ответах Сергея я описал суть проблемы, почему так не подходит.

[andand44]

funkydance, Разумеется ширину container можно и с помощью padding имитировать, только дополнительный блок надежнее. Не придется все переделывать, если вдруг ширину container кто-то захочет изменить.
https://jsfiddle.net/q7tgh8p9/1/

[funkydance]

andand44, Да, это я понимаю. Но, такие требования от заказчика.