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

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