Kolumny z równej wysokości i koloru tła przepełnionego pojemnika

Question

chcę osiągnąć to:

lub

Korzystnie tylko w css.

Szukałem i przeczytałem ten artykuł http://css-tricks.com/fluid-width-equal-height-columns/. Jednak tak naprawdę nie radzi sobie z kolorami tła przepełniającymi problem z pojemnikiem.

Answer 1

Gdy masz element div uwięziony w kontenerze nadrzędnym, trudno będzie go przelać w poziomie. Jeśli możesz uzyskać element div, który chcesz przepełnić poza tym kontenerem, byłoby najlepiej.

Jeśli nie, jednym ze sposobów osiągnięcia tego efektu jest użycie opcji: before i: after na elementach div, które mają zostać przepełnione. Zasadniczo dajesz im taką samą wysokość i kolor tła, a następnie ustawiasz je po prawej i lewej stronie głównego 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 */ 
} 

i to samo dla: po, tylko za pomocą prawej i margin-right