是否有一种方法可以让父容器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而不搞砸其他所有东西。
当前回答
假设父元素有一个固定的宽度，例如#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;
}
其他回答
.parent {
margin:0 auto;
width:700px;
border:2px solid red;
}
.child {
position:absolute;
width:100%;
border:2px solid blue;
left:0;
top:200px;
}
使用绝对定位
.child-div {
position:absolute;
left:0;
right:0;
}
我用了这个:
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;
}
那么解决方案将如下。
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent{
width: 960px;
margin: auto;
height: 100vh
}
.child{
position: absolute;
width: 100vw
}
我也遇到过类似的问题。 子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度。
我通过使子元素position: relative和添加一个伪元素(:before)到它的position: absolute来解决这个问题;上图:0;底部:0;宽度:4000 px;左:-1000 px;。 伪元素作为伪背景元素留在实际的子元素后面。这适用于所有浏览器(即使是IE8+和Safari 6+ -也不能测试旧版本)。
小例子:http://jsfiddle.net/vccv39j9/
