CSS：片側だけ親要素から子要素をはみ出させる

2021.09.30

Coding

CSS

親要素のコンテンツの幅を継承しつつ、片側だけ子要素がはみ出すレイアウトを実装します。応用しだいでは、子要素にスライダーを実装するなどでかなりおしゃれなレイアウトを作成することも可能です。

実装する

実装したものがこちら。
親要素から、子要素が右側だけ出ているのが確認できると思います。

See the Pen 右だけボックスからはみ出させる – calc by Yurie (@kkrg) on CodePen.

html

<div class="inner">
  <div class="box"></div>
</div>

CSS

.inner {
  width: 520px;
}

.box {
  width: calc( 100vw - ( 100vw - 520px ) / 2 ); /* ウィンドウ幅（100vw）から、親要素の横幅（520px）を引いて余白分のサイズを算出。その後、余白分の幅を2で割り、片側分の余白サイズを算出、最後にウィンドウ幅（100vw）から片側分の余白サイズを引いている */
}

URLをコピーする