是否有一种方法可以让父容器DIV中的子DIV比父容器DIV宽。子DIV需要与浏览器视口的宽度相同。
请看下面的例子:
子DIV必须作为父DIV的子DIV。我知道我可以在子DIV上设置任意的负边距，使其更宽，但我不知道如何从本质上使它100%的浏览器宽度。
我知道我能做到:
.child-div{
margin-left: -100px;
margin-right: -100px;
}
但我需要子节点的宽度与浏览器的宽度相同，浏览器是动态的。
更新
感谢您的回答，到目前为止，似乎最接近的答案是使子DIV位置:绝对，并将左右属性设置为0。
下一个问题是，我有父位置:相对，这意味着左右属性仍然是相对于父div，而不是浏览器，见示例这里:jsfiddle.net/v2Tja/2
我不能从父对象中删除position: relative而不搞砸其他所有东西。
当前回答
我尝试了你的一些解决方案。这个:
margin: 0px -100%;
padding: 0 100%;
是迄今为止最好的，因为我们不需要额外的CSS较小的屏幕。我制作了一个codePen来显示结果:我使用了带有背景图像的父div，以及带有内部内容的子div。
https://codepen.io/yuyazz/pen/BaoqBBq
其他回答
我尝试了你的一些解决方案。这个:
margin: 0px -100%;
padding: 0 100%;
是迄今为止最好的，因为我们不需要额外的CSS较小的屏幕。我制作了一个codePen来显示结果:我使用了带有背景图像的父div，以及带有内部内容的子div。
https://codepen.io/yuyazz/pen/BaoqBBq
基于你最初的建议(设置负边距)，我已经尝试并提出了一个类似的方法，使用百分比单位的动态浏览器宽度:
HTML
<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;
}
负边距会让内容流出父DIV。因此，我设置padding: 0 100%;将内容推回到Chlid DIV的原始边界。
负边距还会使.child-div的总宽度扩展到浏览器视口之外，从而产生水平滚动。因此，我们需要通过应用overflow-x: hidden到一个祖父母DIV(这是父DIV的父DIV)来剪辑挤出宽度:
这是jsf
我已经尝试过Nils Kaspersson的左:calc(-50vw + 50%);它在Chrome和FF(还不确定IE)中工作得很好，直到我发现Safari浏览器不能正确地做到这一点。希望他们尽快解决这个问题，因为我实际上喜欢这个简单的方法。
这也可以解决父DIV元素必须为position:relative的问题
这种变通方法的2个缺点是:
需要额外的标记(即祖父母元素(就像好的ol' table垂直对齐方法不是吗…) Child DIV的左右边界永远不会显示，因为它们在浏览器的视口之外。
如果你发现这种方法有任何问题，请让我知道;)。希望能有所帮助。
你可以试试position: absolute。然后给出宽度和高度，top: 'y轴从顶部开始' 左:x轴
那么解决方案将如下。
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent{
width: 960px;
margin: auto;
height: 100vh
}
.child{
position: absolute;
width: 100vw
}
我用了这个:
HTML
<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;
}
