[CSS]ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック

全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。

いやー、日本語ムズカシイ、、、

• デモ
• 実装

デモ

デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。

まずは、表示サイズがラッパーの幅960pxを超えた時の表示。

Improved Full Width Browser：幅1200px

コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。

表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。

Improved Full Width Browser：幅780px

実装

HTML

HTMLはシンプルで、ラッパー内にヘッダとコンテンツが配置されています。

<div class="hidden">
  <div class="wrapper">
    <header>
      <h1>Improved full width browser bars</h1>
      <h2>This breaks out of the wrapper but not it's content.</h2>
    </header>
    <p>This white area is a simple 960 wrapper</p>
  </div>
</div>

CSS

ラッパーの幅は「max-width: 960px;」で、ヘッダがこの最大幅を超えるのにはmarginで-500%し、paddingで同じ量500%を指定しています。
あとは、「overflow-x: hidden;」で横スクロールを消すのをお忘れなく。

html, body {
  margin: 0;
  padding: 0;
  background: gray;
  font-family: sans-serif;
  height: 100%;
}
.hidden {
  overflow-x: hidden;
}
.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 2em;
  background: white;
}
header {
  margin: 0 -500%;
  padding: 0.5em 500%;
  background: rgba(255,0,0,.5);
}