div泄漏父容器最大寬度

Question

我需要讓子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，所以高度是動態的。

Answer 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以％爲值使用元素的寬度和高度。

Answer 2

這裏有一個方法，你可以嘗試：

.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>

Answer 3

這可能有點破解，但我之前通過添加:: 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; 
}