2017-07-05 25 views
0

親コンテナの最大幅を子divリークにする必要があります。 今、私は(それを知っている)親の詰め物だけをリークすることができます。Divリーク親コンテナ最大幅

すべてのページをコンテナにラップしていくつかのセクションをリークさせる必要があります。

これがなければ、すべてのセクションにコンテナを設定する必要があります。ここで

は、いくつかのスニペット

Better snippet on codepen

.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

あなたは相対的な位置を使用することによってそれを行うことができます。実際には、あなたのコンテナとあなたの子供のリークにposition: relativeが必要です。次に、あなたの子供を中心にするには

left: 50%; 
transform: translateX(-50%); 

これは、コンテナが中央に配置されているために機能します。したがって、left: 50%は、子の左端を親の幅の50%に初期位置(親の中心を意味する)から移動します。次に、transform: translateX(-50%)は、子供の左端を幅の50%左に移動します。あなたは子供を全幅にするためにwidth: 100vwを追加するだけです。ここでは抜粋です:

.page { 
 
    position: relative; 
 
} 
 

 
.container { 
 
    max-width: 100px; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.child-leak { 
 
    height: 200px; 
 
    background: lightcoral; 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    padding: 10px; 
 
    width: 100vw; 
 
} 
 

 

 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
}
<div class="page"> 
 
    <h1>My title</h1> 
 
    <div class="container"> 
 
    <div class="child-leak"> 
 
     My full width child 
 
    </div> 
 
    </div> 
 
    <div>Below content</div> 
 
</div>

この技術は、水平方向の要素が垂直センタリングのためにも働くセンターの。これはトップ用%の値ので働き、、底を左最初の非静的親幅と高さを意味します。一方、%の値を持つtranslateは要素の幅と高さを使用します。

+0

これは素晴らしいことです!しかし、一般的に、私は子供の高さをコントロールすることはできません。私はデモンストレーションだけに高さを設定しましたが、私はよりダイナミックなものが必要です。それでも、これは私が子供の高さをコントロールしているときに役立ちます。 –

+0

私はコードを更新しました。これは現在完全に動的であり、本当に良いテクニックを使用して要素を中心に置きます。 –

+0

現在作業中です!素晴らしいアイデアをありがとう。私はコンテンツにいくつかの制限をもたらすので、トランスフォームを使いたくないのですが、これは解決できます。私は子要素にボックスのサイズを追加しました(それはパディングなので、ボディがあふれていました)。 +1 –

0

はあなたが試すことができたアプローチである。

.container { 
 
    max-width: 500px; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
    background: lightblue; 
 
} 
 

 
.child { 
 
    background: lightcoral; 
 
    height: 200px; 
 
    width: 400%; 
 
    margin-left: -150%; /* (width of child - 100)/2 */ 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; /* prevent horizontal scroll bar */ 
 
} 
 

 
* { 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
}
<div class="container"> 
 
    <div class="child">I am outside the parent</div> 
 
</div>

+0

これは良いアプローチですが、子が漏れすぎてしまいます。私はまだビューの幅に合ったものが必要です。これを行うことができる負のマージンの数学について考えることができますか? (あなたはまだコンテナのパディングと最大幅を知っていて、cssの計算とブレークポイントを持っています) –

+0

もう一度、私は別の関連する質問を作成しました:https://stackoverflow.com/questions/48300255/section-leak-generating-horizo​​ntal -scroll –

1

これはちょっとしたハックかもしれませんが、以前は:: beforeと:: afterを追加することでこれまでに行ってきました。位置を追加:.childに関連して、次のCSSを追加してください。

.child.leaked:before{ 
    content:""; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    left: -100%; 
    background-color: red; 
    top: 0; 
} 

.child.leaked:after{ 
    content:""; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    right: -100%; 
    background-color: red; 
    top: 0; 
} 
+0

サイドノート、オーバーフローを追加する - x:それは既に適用されていません – Rob

+0

私は色のブロックだけが漏れているときにこれを使用して動作しますが、私はまだ容器の制限を削除するもの、実際の子供をリークする方法が必要です。 –

+0

こんにちは、別の関連する質問を作成しました:https://stackoverflow.com/questions/48300255/section-leak-generating-horizo​​ntal-scroll –

関連する問題