こんにちは!フレッチ(@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に指定しているネガティブマージン+パディングだけだと、横スクロールを出してしまうので。