有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？

Question

有没有办法在比父容器更宽的父容器 DIV 中创建子 DIV。子 DIV 需要与浏览器视口的宽度相同。

请参见下面的示例：

子 DIV 必须 保留为父 div 的子级。我知道我可以在子 div 上设置任意负边距以使其更宽，但我不知道如何从根本上使它成为浏览器的 100% 宽度。

我知道我可以这样做：

 .child-div{
    margin-left: -100px;
    margin-right: -100px;
}

但我需要孩子与动态浏览器的宽度相同。

更新

感谢您的回答，目前为止最接近的答案似乎是让子 DIV position: absolute ，并将左右属性设置为 0。

我遇到的下一个问题是父母有 position: relative ，这意味着左右属性仍然相对于父 div 而不是浏览器，请参见此处的示例： jsfiddle.net/v2Tja/2

我无法在不搞砸其他一切的情况下从父级中删除 position: relative 。

原文由 Camsoft 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用绝对定位

.child-div {
    position:absolute;
    left:0;
    right:0;
}

原文由 Blowsie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是将子元素保留在文档流中的通用解决方案：

 .child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

我们将子元素的 width 设置为填充整个视口宽度，然后通过将其移动到 left 一半视口的距离使其与屏幕边缘相接, 减去父元素宽度的 50%。

演示：

 * {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

 <div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

对 vw 和 calc() 的浏览器支持通常可以看作是 IE9 和更新版本。

注意： 这假设盒子模型设置为 border-box 。如果没有 border-box ，您还必须减去填充和边框，使这个解决方案变得一团糟。

注意： 鼓励隐藏滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。

原文由 Nils Kaspersson 发布，翻译遵循 CC BY-SA 4.0 许可协议