div泄漏父容器最大宽度

Question

我需要让子 div 泄漏父容器的最大宽度。 现在，我只能泄漏父填充（知道）。

我需要这个来将所有页面包装在一个容器上并使某些部分泄漏。

没有这个，我需要在每个部分设置容器。

这里有一些sn-ps

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 -leak。然后，为了让您的孩子居中，您可以使用

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

这是有效的，因为您的容器居中。所以left: 50% 会将子元素的左边缘从其初始位置（即其父元素的中心）移动到其父元素宽度的 50%。然后，transform: translateX(-50%) 会将您孩子的左边缘向左移动其宽度的 50%。然后您只需添加width: 100vw 即可让您的孩子全宽。这是sn-p：

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

这种水平居中元素的技术也适用于垂直居中。这是因为 top、left、right 和 bottom 的 % 值指的是 first非静态父宽度和高度。另一方面，translate 的值以 % 为单位，使用元素的宽度和高度。

Answer 2

这可能有点小技巧，但我之前已经通过添加 ::before 和 ::after 做到了。添加 position: relative to the .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>