Question

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

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

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

以下是一些片段

libmylib.a

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

注意：在演示中，我设置了孩子的身高，但我无法控制它。它是一个动态内容div，所以高度是动态的。

Answer 1

您可以使用相对定位来完成。实际上，您的容器和您的孩子需要position: relative。然后，为了让您的孩子居中，您可以使用

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

这是有效的，因为您的容器居中。因此left: 50%会将子边缘从其初始位置（即其父节点的中心）移动到其父边距的50％。然后，transform: translateX(-50%)会将您孩子的左边缘移动到左侧宽度的50％。然后，您只需添加width: 100vw即可让您的孩子获得全宽。这是片段：

＆＃13;

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

＆＃13;

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

＆＃13;

这种水平居中元素的技术也适用于垂直居中。这是因为顶部，左，正确和底部的％值指的是第一个非静态父宽度和高度。另一方面，值为％的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>

Div泄漏父容器最大宽度

3 个答案: