概要
子要素に下記のmarginを指定することで画面幅最大で表示ができる
前提
親要素がmargin: 0 auto;などで画面中央寄せとなっていること
※親要素の中央を起点としてmarginを取るため、子要素の表示が範囲がおかしくなる(子要素のmarginをいじってみるとわかる)
サンプルコード
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
border: 1px dotted blue;
height: 300px;
margin: 0 auto; /* 前提 */
width: 1000px;
}
.child {
border: 1px solid red;
height: 300px;
margin: 0 calc(50% - 50vw); /* 画面幅いっぱいに表示 */
}
</style>
↧