Как сверстать такие блоки?

Question

[Дмитрий Чесноков]

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

Answer 1

[Ankhena]

background: linear-gradient(to right, yellow 50%, green 50%);

https://jsfiddle.net/tpacedmw/

Альтернативный вариант с псевдоэлементами https://jsfiddle.net/yz9k3pxc/

spoiler

<div class="wrapper">

  <div class="inner">
    <div class="col c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
    <div class="col c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
  </div>
  <div class="inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati saepe inventore ut, doloremque dolor consequatur, nesciunt voluptates quod nostrum accusamus hic minima quasi id labore error aliquid omnis perspiciatis. Et sint maiores accusamus rerum, quae enim asperiores a sed quasi repellendus, corrupti repellat eius quaerat quia cupiditate assumenda vel optio, nisi. Modi temporibus, eum aliquam optio quaerat doloremque expedita deleniti.
  </div>

</div>

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  margin: 0;

}
.wrapper {
  overflow-x: hidden;
}
.inner {
  display: flex;
  width: 80%;
  margin: auto;
}
.col {
  position: relative;
  width: 50%;
  padding: 20px 0;
}
.c1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background: yellow;
  z-index: -1;
}
.c2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100%;
  background: green;
  z-index: -1;
}

Answer 2

[Дима Долготер]

Comments

[Антон]

А горизонтальный скролл предлагаете убирать путем боди оверфлоу?

[Дмитрий Чесноков]

Интересное и в то же время странное решение =) при масштабировании желтая полоска кончается(но это не проблема), может есть еще какой вариант решения? Я смог сделать только позиционированием блока с текстом(в желтом блоке) и картинки(в зеленом).

[Дима Долготер]

Антон, да, или это плохо?

[Ankhena]

SpiderPigAndCat, а если экран будет больше 800% от мелкого блока? Будете менять? На 100500%?

[Дима Долготер]

Ankhena, в чем проблема? предложи вариант получше

[Ankhena]

SpiderPigAndCat, да уж час назад...

В вашем варианте размеры для псевдо нужно задавать в vw и не забывать overflow.

[Дима Долготер]

Ankhena, вы не правильно поняли ситуацию.

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

[Ankhena]

SpiderPigAndCat, ни мой вариант, ни модифицированный на vw ваш, не противоречат вопросу. Песочницу-то откройте.

[Дима Долготер]

Ankhena,))) я открывал. но вот вопрос. что с адаптивом?

[Ankhena]

SpiderPigAndCat, я без понятия как именно спрашивающий собирается перестраивать эти блоки. Но сомневаюсь, что он (или его дизайнер) придумает что-то неадаптируемое.

Еще раз: если вы в своем ответе замените не пойми откуда взявшиеся 400% на 50vw, скорректируете позиционирование и добавите блок на всю ширину с overflow (потому что вешать overflow на body всё таки не очень), то это тоже будет решением ;) (Это если не будет таких же границ у блоков как у вас в песочнице, а то еще и их придется компенсировать)