div 泄漏父容器最大宽度

Question

我需要让一个子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，所以高度是动态的。

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

这可能有点黑客，但我之前通过添加 ：：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;
}

Answer 3

您可以尝试以下方法：

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