html - CSS3边界和渐变

我有一个HTML CSS查询。

我有以下JS小提琴。 http://jsfiddle.net/NC9NL/如果您看这个小提琴，您会看到我在主要内容的两侧各有两个div，以为其提供渐变效果。左右两个div设置为100％；

但是，当主要内容大于此值时，例如需要滚动条，其他两个div不在页面上跟随它。有谁知道我怎么能做到这一点。

干杯，

最佳答案

我认为您真的不需要这些其他列。只需将两个渐变合并为一个并将其分配给主列即可：

.container_body {
    background: #fff;
    background: -moz-linear-gradient(left, #c6c6c6 0%, #ffffff 2%, #ffffff 98%, #c6c6c6 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c6c6c6), color-stop(2%,#ffffff), color-stop(98%,#ffffff), color-stop(100%,#c6c6c6));
    background: -webkit-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -o-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: -ms-linear-gradient(left, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    background: linear-gradient(to right, #c6c6c6 0%,#ffffff 2%,#ffffff 98%,#c6c6c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#c6c6c6',GradientType=1 );
}