【CSS】ページの一部のセクションを親要素より広く表示させる。

サイトの制作や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;
}
CSS
スポンサーリンク
iPhone7修理・買取は、三重津鈴鹿四日市名張・滋賀草津湖南八日市近江八幡は出張無料にて即日対応致します。
タイトルとURLをコピーしました