是否有一种方法可以让父容器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而不搞砸其他所有东西。
当前回答
下面是一个通用的解决方案，将子元素保留在文档流中:
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
我们设置子元素的宽度来填充整个视口的宽度，然后通过将它向左移动一半视口的距离，减去父元素宽度的50%，使它满足屏幕的边缘。
演示:
* { box-sizing: border-box; ｝ 身体{ 保证金:0; overflow-x:隐藏; ｝ .parent { max-width: 400 px; 保证金:0自动; 填充:1快速眼动; 位置:相对; background - color: darkgrey; ｝ .child { 宽度:100大众; 位置:相对; 左:calc(-50vw + 50%); 身高:100 px; 边框:3px纯红色; background - color: lightgrey; ｝ < div class = "父" > 精准医疗 < div class = "孩子" >子< / div > 帖子 < / div >
对vw和calc()的浏览器支持通常可以被视为IE9或更新版本。
注意:这里假设盒子模型被设置为border-box。如果没有边界框，您还必须减去填充和边界，使这个解决方案变得一团糟。
注意:建议隐藏滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。
其他回答
我用了这个:
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;
}
你可以试试position: absolute。然后给出宽度和高度，top: 'y轴从顶部开始' 左:x轴
假设父元素有一个固定的宽度，例如#page {width: 1000px;}和居中#page {margin: auto;}，如果你想让子窗口适应浏览器视口的宽度，你可以简单地做:
#page {
margin: auto;
width: 1000px;
}
.fullwidth {
margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
width: 100vw;
}
我尝试了你的一些解决方案。这个:
margin: 0px -100%;
padding: 0 100%;
是迄今为止最好的，因为我们不需要额外的CSS较小的屏幕。我制作了一个codePen来显示结果:我使用了带有背景图像的父div，以及带有内部内容的子div。
https://codepen.io/yuyazz/pen/BaoqBBq
使用绝对定位
.child-div {
position:absolute;
left:0;
right:0;
}
