1

ヘッダー、コンテンツの長さに基づく（cssベースの）動的な高さを持つ3つのコンテンツ列、およびフッターを含む中央のラッパーdivがあります。

ここで、これらの要素の色を左右に拡大するバックラウンドが必要です。

これがjs-fiddleのデモです：http：//jsfiddle.net/SLvYx/

したがって、左上隅を赤、左中央を黄色、左下隅を緑などにします。私の最初の解決策は、本文に幅2500pxのbackground .pngを使用することでしたが、それは、必須であると認識された後、コンテンツベースの動的な列の高さが実装される前でした。

純粋なhtml/cssベースのソリューションはないかもしれませんが、私はスクリプトに関する初心者ですが、JQueryまたはjavascriptもオプションです。多分私は箱から出して少し考えているかもしれません、多分私はこれを達成するために全体のhtml構造をやり直さなければならないかもしれません、しかし私は気にしません。:-)

ほとんどどこでも検索しましたが、その特定のケースはどこにも見つかりませんでした。

助けていただければ幸いです。これを調査してくださったすべての人に感謝します。

編集：私はこの投稿を見つけました：動的テーブルサイズのhtmlは、5列のテーブルを使用するのに役立つ可能性があります。これは、左側の背景に1番目、コンテンツに2番目から4番目、右側の背景に5番目です。 ...これは温かくお勧めしますか、それともテーブルをこれから遠ざける必要がありますか？

これが私のデモの完全なコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />  <title>Test</title>
<style type="text/css">
body {margin:0;}
#wrapper {margin: 0px auto; width: 940px;}
#header {background:red; height:100px;}
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;}
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;}
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;}
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;}
#footer {background:lightgreen; height:100px;}
</style>
</head> 
<body>

<div id="wrapper">

    <div id="header">
        Header
    </div>

        <div id="content_wrapper">        

            <div id="leftcolumn">
                Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />
            </div>

            <div id="middlecolumn">
                Middle Column
            </div>

            <div id="rightcolumn">
                Right Column
            </div>

        </div>    

    <div id="footer">
        Footer
    </div>

</div>    

</body>
</html>
4

1 に答える 1

1

いいえ、JavaScriptやテーブルは必要ありません。通常のol'（divベース）のHTMLとCSSでうまくいきます。

あなたがする必要があるのはあなたのページをわずかに再構築することです。ラッパーdivに依存する代わりに、3つの主要なセクションをスタックしてから、それぞれの中に希望の幅の内部divを配置します。更新されたJSFiddleを参照してください。

各セクションに「inner」クラスの（明らかに非セマンティックな）divを追加しました。これにより、目的の940幅が得られます。

現在の唯一のトリックは中央のセクションです。あなたがしたいのは、本当に広くて短い画像を作成することです。たとえば、幅3000ピクセル、高さ1ピクセルです。左側が黄色になり、右側がダークゴールデンロッドになるように50/50に分割します。その画像をcontent_wrapperの背景として使用し、垂直方向に並べて表示すると、側面から色が広がっているように見えます。これはほとんどのブラウザで機能します。

古いブラウザを気にしない場合は、さらに一歩進んで、content_wrapperの背景にCSSグラデーションを使用することもできます。このさらに更新されたフィドルを参照してください。

IE9以下ではグラデーションは機能しませんが、画像はフォールバックとしてスタイルシートにあるため、問題ありません。

于 2012-09-28T12:42:53.177 に答える