是否有一种方法可以让父容器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而不搞砸其他所有东西。
当前回答
Flexbox可以用三行CSS使子控件比父控件更宽。
只需要设置子控件的显示、左距和宽度。左边距取决于子元素的宽度。公式为:
margin-left: calc(-.5 * var(--child-width) + 50%);
CSS变量可以用来避免手动计算左侧空白。
演示1:手动计算
.parent { background - color:水; 高度:50 vh; margin-left:汽车; margin-right:汽车; 宽度:50大众; ｝ .child { 背景颜色:粉色; 显示:flex; ｝ .wide { 左缘:calc(-37.5vw + 50%); 宽度:75大众; ｝ .full { 左缘:calc(-50vw + 50%); 宽度:100大众; ｝ < div class = "父" > < div > 父 < / div > <div class="child wide"> 75年大众 < / div > <div class="child full"> 100年大众 < / div > < / div >
演示2:使用CSS变量
.parent { background - color:水; 高度:50 vh; margin-left:汽车; margin-right:汽车; 宽度:50大众; ｝ .child { 背景颜色:粉色; 显示:flex; margin-left:钙(-。5 * var(——child-width) + 50%); 宽度:var(——child-width); ｝ .wide { ——child-width: 75大众; ｝ .full { ——child-width: 100大众; ｝ < div class = "父" > < div > 父 < / div > <div class="child wide"> 75年大众 < / div > <div class="child full"> 100年大众 < / div > < / div >
其他回答
我尝试了你的一些解决方案。这个:
margin: 0px -100%;
padding: 0 100%;
是迄今为止最好的，因为我们不需要额外的CSS较小的屏幕。我制作了一个codePen来显示结果:我使用了带有背景图像的父div，以及带有内部内容的子div。
https://codepen.io/yuyazz/pen/BaoqBBq
.parent {
margin:0 auto;
width:700px;
border:2px solid red;
}
.child {
position:absolute;
width:100%;
border:2px solid blue;
left:0;
top:200px;
}
要使子div与内容一样宽，请尝试以下方法:
.child{
position:absolute;
left:0;
overflow:visible;
white-space:nowrap;
}
我也遇到过类似的问题。 子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度。
我通过使子元素position: relative和添加一个伪元素(:before)到它的position: absolute来解决这个问题;上图:0;底部:0;宽度:4000 px;左:-1000 px;。 伪元素作为伪背景元素留在实际的子元素后面。这适用于所有浏览器(即使是IE8+和Safari 6+ -也不能测试旧版本)。
小例子:http://jsfiddle.net/vccv39j9/
很长一段时间以来，我一直在到处寻找这个问题的解决办法。理想情况下，我们希望子进程大于父进程，但不需要事先知道父进程的约束条件。
我终于找到了一个很好的答案。 逐字抄写:
这里的想法是:将容器推到容器的确切中间 浏览器窗口左:50%;，然后将其拉回左边缘 与负-50vw边际。
.child-div {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
