サイトの制作やLPで、親要素より幅を広くしたり全幅で表示させたい場合があります。その際の、CSSの記入方法です。
親要素
.container {
width:1200px;
}
上記のようにwidthが1200pxですが、それより超えて表示させたい場合などです。
対処法1
子要素
.inner {
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: #ddd;
position: relative;
}
対処法2
子要素
.inner{
margin-left: calc( ( 100% - 100vw ) / 2 );
margin-right: calc( ( 100% - 100vw ) / 2 );
background-color: #ddd;
}