Skip to content
This repository has been archived by the owner on Oct 18, 2022. It is now read-only.

Latest commit

 

History

History
24 lines (18 loc) · 626 Bytes

8c5256f0afde17.md

File metadata and controls

24 lines (18 loc) · 626 Bytes
title emoji type topics published
【css】親要素からはみ出して子要素を画面幅いっぱいに広げる
📚
tech
css
html
true

結論

margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);

@codepen

片側の場合は片方だけを指定すればOK

解説

要素の半分から画面幅の半分を引くことで、画面幅までのネガティブマージンを算出している。

https://gokansoichiro.com/blog/css-calc-01/