レスポンシブな列レイアウトに一致する全身の体の背景

Question

私はスティックで月を求めているかもしれませんが、ここでは：2色の背景を取得して2列の背景をどのように描くかを考えようとしています。主な内容

バックグラウンドは完全なビューポート幅（端から端まで）でなければならず、中央のコンテンツはmax-widthの960pxで応答し、2つの列に分割されます。最初の列は幅の2/3（最大640ピクセル幅）で、2列目は残りの1/3（最大320ピクセル幅）を占めます。おそらく最も簡単な方法は、それが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. は、私はすべてのこれらの宣言を理解していない - 第二のカラーストップのは、ある理由値が最初の値よりも低い（なぜ宣言の最初の色が異なる割合で停止するのか）。それを調整すると違いはないようですが、必要なものと一致しないので、値を更新する必要がありますが、私はを取得しません。
2. 効果はですが、残念ながら完璧ではありません。まず、2つの色の間の停止は少しぼやけています。そして悪化すると、線は再スケールするときに「ドリフト」します。それは少量だけですが、残念ながら私が与えられたデザインの錯覚を殺すには十分です。

私はlinear-gradientのバリエーションと割合& calc()ベースのオフセットを持つ擬似要素を含むメソッドのカップルを、試してみたが、私は完全にそれが届きません。私は、これがSVG要素処理のいくつかを使って達成できるかどうかについて議論しましたが、私は信じられないほどシンプルに見えるものに完全に固執しているようです。

純粋なCSSでこれを実現する方法はありますか？

Answer 1

私はwoothemes.com例に見ませんでしたが、ここに私のテイクがあります：

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

これは、サイトの残りの部分に基づいてビットを適応させる必要があるだろうが、アイデアがあります：1つのコンテナ（最大960ピクセル）、2人の子供（66.666％と33.333％の幅）。各子は、2つの列が合う点に絶対配置される擬似要素を持っています。そして、それらはすべての背後にz-索引付けされています。

あなたのサイトの残りの部分がどのように見えるのかわかりませんので、残りは少し恣意的にしました。背景色の列の高さは固定されており、現在は200vhです。