具有相同高度和背景颜色溢出容器的列

Question

我想实现这个目标：

或

最好只在css中。

我四处搜索并阅读了这篇文章http://css-tricks.com/fluid-width-equal-height-columns/。然而，它并没有真正解决容器问题溢出的背景颜色。

Answer 1

一旦你有一个被困在父容器里面的div，就很难让它水平溢出。如果您可以获得想要在该容器外溢出的div，那将是最好的。

如果没有，可以实现此效果的一种方法是在要溢出的div上使用：before和：after。基本上你给它们相同的高度和背景颜色，然后将它们放在主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 */
}

和以下相同的事情：之后，只使用右边和边距右边