親要素を無視してブラウザ幅100%で表示するCSS

CSSでは基本的にコンテンツを.containerとか.mainのdivで囲む。 大抵そのdiv要素はwidth768pxとかなんだけど、一部だけその要素を突き抜けてブラウザ幅いっぱいに表示したくなるときがある。

その時の回避法がいくつかあるんだけど、一番スマートで汎用的なのがあったのでメモ

デモを見せろ

こういうの

See the Pen YaKLxW by thr3a (@thr3a) on CodePen.

コード

親要素が.container、幅いっぱいに表示させたい要素を.full-widthとする。とHTMLは以下

<div class="container">
  ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
  <div class="full-width">
    ぴよぴよぴよぴよぴよぴよぴよぴよぴよぴよぴよ
  </div>
  ふがふがふがふがふがふがふがふがふがふがふがふがふがふがふがふがふがふがふが
</div>

CSSは以下

.container {
  width:1200px;
  margin-right: auto;
  margin-left : auto;
  background-color: gray;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: red;
}

background-colorはわかりやすいようにつけただけなので削って問題ない。ポイントは.full-widthの

width: 100vw;

これはブラウザのビューポートを指定するもので、これを100%で取ってるからブラウザ幅いっぱいに表示できる。