有没有办法在比其父级宽的父级容器 DIV 中拥有一个子级 DIV。子 DIV 需要与浏览器视口(viewport)的宽度相同。

请看下面的例子:

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

我知道我能做到:

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

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

更新

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

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

我无法从父级中删除 position: relative 而不会搞砸其他一切。

最佳答案

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

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

我们将子元素的 width 设置为填充整个视口(viewport)宽度，然后通过将其移动到 left 一个视口(viewport)一半的距离，减去父元素宽度的 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，您还必须减去填充和边框，使这个解决方案变得一团糟。

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

https://stackoverflow.com/questions/5581034/