css - 2色、フレキシブル、水平の背景 "band"

Question

自分のコードに "水平バンド"を必要とするサイトにはかなり精通しています - コンテンツが960px内で固定されていても、左右。

私はそれらが単一の色を持っている場合、または私が背景として使用できる単一の画像を持っている場合、それらを行う方法を知っています。

は最近、クライアントがカップルの特別な要件には、そのようなバンドの一つが必要：

• バンドは右の色と左
• 色の一色プログラム可能である必要があります。コンテンツタイプに応じて変化します

私は最初、可能な2色の組み合わせで背景画像を作成することを考えましたが、システムは基本的に2色を許可する必要があります。したがって、色はhtml/css not imagesで指定する必要があります。

私はしばらくの間しようとしたとこれまでのところ、これは私の最高の努力されています：

http://jsfiddle.net/WENu3/

私は、このセットアップについては好きではない、いくつかのものがあります：

• コンテナは、固定高さがである必要があります。さもなければ左右のバンドが崩壊する。私はむしろテキストの内容によって定義される全体の高さを持っています。
• コンテナ内のすべてのdivにheight: 100%を追加する必要があります。私はむしろバンドで指定する必要があるだけです。
• 私はあまりにも多くのdivを必要と感じています。特に、私は "コンテンツ" divが必要であるかどうかはわかりません。
• 下部に1ピクセルの違いがあります（ChromeとFirefox）。私はなぜそれが起こるのか分からず、私はそれを修正する方法を知らない。

この問題を解決する方法はありますか？

Answer 1

このお試しください：のdivの左と右の

http://jsfiddle.net/WENu3/23/

floatを。コンテナにoverflow:hiddenを使用してそれらをクリアし、padding-bottom &とマイナスmargin-bottomをバンドの上に設定します。このメソッドを使用すると、コンテンツまたはバンドdivのいずれかの高さを設定する必要はありません。高さ=より良いマークアップ。

Answer 2

代わりに、CSS3グラデーションを使用してみてください。これは、スタイリング目的でのみ定義する不必要な要素の多くを節約します（これは実際には問題ありません）。

基本的にはこれはフィドル一例であり、

background-image: linear-gradient(left, rgb(0,0,255) 50%, rgb(255,0,0) 0%); 

のようなものを100％幅の要素に適用される50％から100％までの幅と赤の0〜50％の勾配の青色が必要になります。http://jsfiddle.net/657X4/2/

グラデーションの詳細については

はhttp://caniuse.com/css-gradients

IE<10を見てみましょサポートグラデーションをサポートしていませんが、あなたはまた、例えば（グレースフル・プログラマブルではない劣化としてこれらのブラウザのために別のスタイルを提供するために検討することもでき位置top centerで青とy軸に沿って繰り返さ広い背景GIF、50％の赤、50％）