全宽正文背景，以匹配响应列布局

Question

我可能会在这里要求用棍子登月，但是：我试图找出如何获得双色背景来描绘主要内容的两列。

背景必须是全视口宽度（边对边），中心内容响应时的max-width为960px，分为两列;第一列是宽度的2/3（最大宽度为640px），第二列占据剩余的1/3（最大宽度为320px）。可能最简单的解释方法是使用GIF：

如您所见，浅蓝色侧边栏的左侧部分＆＃39;背景颜色始终与实际侧边栏列的左侧对齐。有人向我指出，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声明的第一个颜色停止不同的百分比）？调整它似乎没有什么区别，但我肯定需要更新这些值，因为它们不符合我的需要...但我没有得到它。< / em>的
2. 虽然效果是 close ，但遗憾的是它并不完美：首先，两种颜色之间的停止有点模糊;更糟糕的是，这条线确实漂移了＃39;当重新缩放时。虽然它只是少量的，但不幸的是它足以用我给出的设计来消除幻觉。

我尝试了几种方法，包括linear-gradient的变体和带有百分比＆amp;的伪元素。 calc() - 基于抵消，但我完全没有得到它。我已经讨论过这是否可以通过一些超级聪明的SVG元素处理实现，但我似乎完全陷入了看似简单的东西。

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

Answer 1

我没有查看woothemes.com的例子，但这是我的看法：

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

这需要根据网站的其他部分进行调整，但想法是：一个容量最大960px，有两个孩子（66.666％和33.333％宽度）。每个子节点都有一个伪元素，绝对位于两列相交的位置。然后他们在所有事物后面都是z-index。

我不知道你网站的其余部分是什么样的，所以我把剩下的部分留下来了。背景颜色列具有固定高度，现在为200vh。