css - 全宽正文背景以匹配响应式列布局

Question

在这里，我很可能会要求一根棍子上的月亮，但是:我正在尝试弄清楚如何获得双色背景来描绘主要内容的两列。

背景必须是完整的视口(viewport)宽度(边到边)，并且中心内容是响应式的，max-width 为 960px，分为两列；第一列是宽度的 2/3(最大 640px 宽)，第二列占据剩余的 1/3(最大 320px 宽)。解释它的最简单方法可能是使用 GIF:

如您所见，浅蓝色“侧边栏”背景颜色的左侧部分始终与实际侧边栏列的左侧对齐。有人向我指出 checkout on woothemes.com几乎具有完全相同的效果(尽管我认为您需要在购物篮中添加一些东西才能看到它)。他们似乎是通过 linear-gradient 实现的，归结为:

background: linear-gradient(90deg,#fff 53.5%,#f0f4f5 46.5%);
background: -moz-linear-gradient(left,#fff 52%,#f0f4f5 46.5%);

问题是:

1. 我根本不理解这些声明 - 为什么第二个色标的值比第一个低(为什么 -moz 声明的第一个色标的百分比不同)？调整它似乎没有什么区别，但我确实需要更新这些值，因为它们不符合我的需要...但我不明白。
2. 虽然效果接近，但不幸的是它并不完美:首先，两种颜色之间的停止有点模糊；更糟糕的是，重新缩放时线条会“漂移”。虽然只是一点点，但不幸的是，这足以消除我得到的设计的幻觉。

我尝试了几种方法，包括 linear-gradient 的变体和基于百分比和 calc() 的偏移量的伪元素，但我'我完全不明白。我一直在争论这是否是我可以通过一些 super 聪明的 SVG 元素处理来实现的，但我似乎完全被困在看起来看似简单的东西上。

有没有办法用纯 CSS 实现这个？

Answer 1

我没有查看 woothemes.com 示例，但这是我的看法:

http://jsbin.com/jofeseseyo/edit?css,output

这需要根据网站的其余部分进行一些调整，但想法是:一个最大 960 像素的容器，有两个 child (66.666% 和 33.333% 宽度)。每个 child 都有一个伪元素，它绝对定位在两列相交的地方。然后它们在所有内容后面进行 z 索引。

我不知道您网站的其余部分看起来如何，所以我让其余部分有点随意。背景色列具有固定高度，现在为 200vh。