有没有一种方法可以在父容器DIV中放置一个子DIV，使其宽度大于其父容器。子DIV的宽度需要与浏览器视口相同。
请参见下面的示例：
子DIV必须保留为父div的子级。我知道我可以设置子div上的任意负边距来使其变宽，但我无法弄清楚如何使其基本上成为浏览器的100％宽度。
我知道我可以这样做：
.child-div{
margin-left: -100px;
margin-right: -100px;
}
但是我需要子元素和浏览器一样宽，而浏览器的宽度是动态的。
谢谢你们的答案，目前最接近的答案是将子元素的 position 属性设置为 absolute，并将左右属性都设置为 0。
我下一个问题是父元素有 position: relative 属性，这意味着左右属性仍然相对于父级 div 而不是浏览器，请看这个示例：jsfiddle.net/v2Tja/2
我不能去掉父元素的 position: relative 属性，否则会影响其他东西。
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
我们将子元素的width设置为填充整个视口宽度，然后通过将其向左移动半个视口距离减去父元素宽度的50％以使其与屏幕边缘相遇。
Demo：
* {
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，则还必须减去填充和边框，使此解决方案变得混乱。
注意：建议隐藏你的滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。
position: relative父元素的正确答案！ - Hanfei Sun使用绝对定位
.child-div {
position:absolute;
left:0;
right:0;
}
我为解决这个问题搜寻了很长时间。理想情况下，我们希望子元素大于父元素，但是事先并不知道父元素的约束条件。
最终我在这里找到了一个精彩的通用答案。 以下是它的原话：
这里的思路是：使用 left: 50% 将容器推到浏览器窗口的正中间，然后再使用负 -50vw 边距将其拉回到左侧边缘。
.child-div {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
90vw。此外，似乎margin-right在任何情况下都没有效果。 - Jason Dufair<div class="grandparent">
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
</div>
</div>
</div>
CSS：
.child-div{
margin: 0 -100%;
padding: 0 -100%;
}
.parent {
width: 60%;
background-color: red;
margin: 0 auto;
padding: 50px;
position:relative;
}
.grandparent {
overflow-x:hidden;
background-color: blue;
width: 100%;
position:relative;
}
padding: 0 100%;将内容推回到子DIV的原始边界。overflow-x: hidden来剪切超出的宽度：
这里是JSfiddle。
我尝试过Nils Kaspersson的left: calc(-50vw + 50%)；在Chrome和FF中运行得非常好（还不确定IE），直到我发现Safari浏览器无法正确处理它。希望他们能尽快修复这个问题，因为我实际上很喜欢这种简单的方法。position:relative的问题。如果您发现此方法存在任何问题，请告诉我。希望能帮到您。
Flexbox可以用三行CSS代码让一个子元素比其父元素更宽。
只需设置子元素的display，margin-left和width属性。其中margin-left取决于子元素的width。公式为:
margin-left: calc(-.5 * var(--child-width) + 50%);
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
}
.wide {
margin-left: calc(-37.5vw + 50%);
width: 75vw;
}
.full {
margin-left: calc(-50vw + 50%);
width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div>示例#2：使用CSS变量
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
margin-left: calc(-.5 * var(--child-width) + 50%);
width: var(--child-width);
}
.wide {
--child-width: 75vw;
}
.full {
--child-width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div><div class="container">
<div class="parent">
<div class="child">
<div class="inner-container"></div>
</div>
</div>
</div>
CSS
.container {
overflow-x: hidden;
}
.child {
position: relative;
width: 200%;
left: -50%;
}
.inner-container{
max-width: 1179px;
margin:0 auto;
}
我尝试了您提供的一些解决方案。其中这一个：
margin: 0px -100%;
padding: 0 100%;
由于我们不需要额外的CSS来适应较小的屏幕，这是迄今为止最好的选择。我制作了一个CodePen来展示结果：我使用带有背景图像的父Div和具有内部内容的子Div。
使用以下代码：
.child{
position:absolute;
left:0;
overflow:visible;
white-space:nowrap;
}
position: relative并向其添加一个伪元素（:before），并将其设置为position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;来解决此问题。
伪元素作为伪背景元素停留在实际子元素后面。这适用于所有浏览器（即使是IE8+和Safari 6+ - 没有测试旧版本）。overflow-x: hidden。 - Seika85在 Nils Kaspersson 的解决方案基础上，我也考虑了垂直滚动条的宽度。我使用 16px 作为示例，从视口宽度中减去此宽度。这将避免水平滚动条出现。
width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
16px 是因为浏览器的默认边距/填充导致了水平滚动条，而不是减去它，只需使用这个 html，body{ margin:0; padding:0 }，这样你就不需要为 16px 进行额外的计算。 - Mi-Creativity
position: relative？你需要position: relative做什么？我想我想问的是：你想做什么？ - thirtydot