親要素を超えて、ブラウザ幅いっぱいに広げる : CSS 1行コード

親要素を超えて、ブラウザ幅いっぱいに広げる : CSS 1行コード

画面の幅いっぱいに広がるデザイン、現代的でよいですね。
よく、ページコンテンツ全体を #wrapper などの要素で包んで、読みやすいように最大幅を設定したりしますが、でもこの部分は広げたい！
というときに有効な、たった1行のCSSコードをご紹介します。

サンプル コード

<!--  HTML  -->

<div id="sample">
    <p>親要素はブラウザに対して中央寄せに</p>
    <div class="child">
      <p>子要素に margin: 0 calc(50% - 50vw) を１行追加！</p>
    </div>
</div>
/*  CSS  */

#sample{
  margin: 0 auto;
  width: 60%;
  outline: 1px solid;
}
#sample .child{
  padding: 0 calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  background: pink;
}

サンプル DEMO

親要素はブラウザに対して中央寄せに

子要素に margin: 0 calc(50% - 50vw) を１行追加！

コード解説

親要素がブラウザに対して中央寄せであれば、この１行を追加するだけで子要素がブラウザ幅いっぱいに広がります。
子要素が display: block でなければ、width: 100% とかしてね。

ちなみに、サンプルでは margin で広げた分を padding で相殺しています。背景を敷きたいだけなら、擬似要素を absolute に配置してゴニョゴニョすれば、子要素のコンテンツに影響を与えません。

ほかにも、position: relative; left: 50%; width: 100vw; transform: translateX(-50%) としても問題ありませんが、ネガディブマージンだけで済む方が無駄なくスマートですね。

気をつけることは、vw 単位にはスクロールバーの幅も含まれるので、ブラウザの表示領域幅より若干広くなり、横スクロールバーが出てしまうこと。
body を overflow-x: hidden にするしかないかと。

おわりに

今さら感のある小ネタで、これからもマッタリ続けます。