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

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 */
}

:after 也是一样的，只使用 right 和 margin-right