frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とする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.

ただこれをしなくてもコンテンツ幅としているdivをいったん閉じて全幅のdivを作れば意図したコーディングは可能です。
上記例でいえば.contentsをいったん閉じれば次の要素が100%幅になります。
なので、そういうことができないサイト上のルールや特性があった場合、有効になる方法です。
またbodyにoverflow-x: hidden;で横スクロールを非表示にするなど、苦肉の策的な方法ではあります。

overflow-x: hidden;