ヘッダーだけを横幅いっぱいに表示するCSS

こんにちは！フレッチ(@Fletch_LF)です！

※この記事は自分用メモです

コンテンツ部分は固定幅で、ヘッダーの背景だけが横幅いっぱいになってるサイトありますよね。

あれを実装するCSSです。

このサンプルでは#headerを横幅いっぱいにします。

html {
    overflow: auto;
}

body {
    width: 100%;
    overflow: hidden;
}

#header {
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;

}

どうやら、htmlに指定するoverflow: auto;と、html直下のbodyタグに指定するoverflow: hidden;がミソのようです。

#headerに指定しているネガティブマージン＋パディングだけだと、横スクロールを出してしまうので。