なつねこメモ

2022/08/03

CSS で親要素をはみ出して、画面幅いっぱいに要素を表示させたい

といっても背景限定ですが、 CSS にて親要素をはみ出して、画面幅いっぱいに表示させる方法。
よく見る下記のようなコードでは、 Windows では縦スクロールバーの分まで含まれてしまい、横スクロールが出来るようになってしまう。

.overflow {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #aaa;
}

それを避けたい場合、下記のようにすれば良い。

.overflow {
  border-image-source: linear-gradient(#aaa, #aaa);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw;
}

これだけ。
例えば、 Divide として表示させたければ、これに height: 1px などを足せば、平行線としても表示出来たりする。 便利。

参考：

• https://twitter.com/ChallengesCss/status/1537394975066972161