css - 高さが同じで背景色が同じ列のオーバーフロー コンテナ

Question

私はこれを達成したい:

また

できればcssのみで。

この記事http://css-tricks.com/fluid-width-equal-height-columns/を検索して読みました。ただし、コンテナの問題からオーバーフローする背景色には実際には取り組んでいません。

Answer 1

親コンテナー内に閉じ込められた div があると、それを水平方向にオーバーフローさせるのは難しくなります。そのコンテナの外にオーバーフローさせたいdivを取得できれば、それが最善です。

そうでない場合、この効果を実現する 1 つの方法は、オーバーフローさせたい 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 を使用するだけです。