frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

親要素のコンテンツ幅を超えて100%の子要素ボックスを作る

スポンサードリンク

レスポンシブデザインを作る上で時として無理をしなければいけない時があります。

先日どうしてもコンテンツ幅を超えて100%のボックスを作る必要があり、そんなことできないかと思いきや調べてみたら発見することができました。

ボックスにネガティブマージンを当てればその分幅が広がります。
その特性を利用してmarign-left,margin-rightにそれぞれウィンドウ幅である100vhそこからコンテンツ幅である100%を引いて2で割ります

margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);

See the Pen awLNOW by funclur (@funclur) on CodePen.

ただこれだとなぜかボックスのボーダーが表示されないんですよね。
bodyの横スクロールを消さなければいけなかったりといずれにせよ苦肉の策ではあるようです。

overflow-x: hidden;

参考:
コンテナーの幅より広がったエリアをcalcでつくる - Qiita