親コンテナの最大幅を子divリークにする必要があります。 今、私は(それを知っている)親の詰め物だけをリークすることができます。Divリーク親コンテナ最大幅
すべてのページをコンテナにラップしていくつかのセクションをリークさせる必要があります。
これがなければ、すべてのセクションにコンテナを設定する必要があります。ここで
は、いくつかのスニペット
.container {
max-width: 500px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
}
.child {
background: lightcoral;
height: 200px;
}
.child.cancel-padding {
margin: 0 -30px;
}
.child.leaked {
}
html,
body {
margin: 0;
padding: 0;
}
* {
text-align: center;
font-family: sans-serif;
}
<small>note: see in fullscreen or on codepen</small>
<h1>what i have</h1>
<div class="container">
<div class="child">A element inside a container</div>
</div>
<h1>what i need</h1>
<div class="container-leaked">
<div class="child leaked">
a element inside the container, but leaking all view width (100vw)
</div>
</div>
<h1>what i can do now</h1>
<div class="container">
<div class="child cancel-padding">Make the element cancel the parent padding, that's all</div>
</div>
<h1>Why i need</h1>
<p>
i will wrap all the page in the container, but sometimes i need sections to leak the container with full view width.
</p>
。注意:デモで、私は子供の高さを設定しましたが、私はそれのコントロールを持っていません。動的コンテンツのdivなので、高さは動的です。ここで
これは素晴らしいことです!しかし、一般的に、私は子供の高さをコントロールすることはできません。私はデモンストレーションだけに高さを設定しましたが、私はよりダイナミックなものが必要です。それでも、これは私が子供の高さをコントロールしているときに役立ちます。 –
私はコードを更新しました。これは現在完全に動的であり、本当に良いテクニックを使用して要素を中心に置きます。 –
現在作業中です!素晴らしいアイデアをありがとう。私はコンテンツにいくつかの制限をもたらすので、トランスフォームを使いたくないのですが、これは解決できます。私は子要素にボックスのサイズを追加しました(それはパディングなので、ボディがあふれていました)。 +1 –