シェアする

  • このエントリーをはてなブックマークに追加

ヘッダーだけを横幅いっぱいに表示する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に指定しているネガティブマージン+パディングだけだと、横スクロールを出してしまうので。

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサードリンク