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; 
}