css - 3 つの画像で構成される全幅のヘッダーとフッター。そのうちの 1 つは可変幅

Question

3 つのサブ要素で構成されるヘッダーとフッターを機能させようとしています。ヘッダーとフッターは純粋に装飾的なものであり、ナビゲーションを意図したものではなく、ページの全幅にまたがることになっています。ヘッダーとフッターの両方に、それぞれ 3 つの画像を使用します。各側に 1 つの固定幅の一意の画像と、それらの間のスペースを埋める 1 ピクセルの画像です。

ヘッダーの HTML は非常に基本的なものです。

<div id="header-container">
    <div id="header-left">
    </div>
    <div id="header-mid">
    </div>
    <div id="header-right">
    </div>
</div>

私は絶対位置にかなり近づいていますが、ヘッダーは修正され、常に上にとどまります。これは間違いなく意図しない動作です (ここでは #header-mid は不要です)。

div#header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: url(images/header-spacer.png) repeat-x;
}

div#header-left {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    left: 0;
    background: url(images/header-left.png);
}

div#header-mid {
    display: none;
}

div#header-right {
    position: absolute;
    width: 600px;
    height: 70px;
    top: 0;
    right: 0;
    background: url(images/header-right.png);
}

画像付きの JSFiddle の例(結果ウィンドウの幅が 1200px より広いことを確認してください)

相対位置を使用しても、背景画像を表示できませんでした。また、HTML を使用して画像を表示しても、header-mid では機能しません。

ウェブ上で全幅のヘッダー/フッターに関する非常に多くのガイドを見つけましたが、この種の組み合わせについて明示的に説明したガイドはありません。

 

ヘッダーの質問に答えてくれたSoheil Ghに感謝しますが、その方法はフッターには適用されません。フッターを含む追加の JSFiddle を次に示します。