Колонны с одинаковой высоты и цвета фона переполненном контейнера

Question

Я хочу, чтобы достичь этого:

или

Предпочтительно в CSS только.

Я искал и читал эту статью http://css-tricks.com/fluid-width-equal-height-columns/. Однако на самом деле он не справляется с цветами фона, переполняющими проблему с контейнером.

Answer 1

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

Если нет, то одним из способов достижения этого эффекта является использование: before и: after на divs, которые вы хотите переполнить. В основном вы даете им ту же высоту и фоновый цвет, а затем позиционируете их вправо и влево от главного div.

.overflowing-div { position: relative; } 
.overflowing-div:before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    margin-left: -100%; 
    width: 100%; 
    height: 100%; /* or fixed height if you know the height of the div you want to extend */ 
    background-color: #ccc; /* same color as .overflowing-div */ 
} 

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