有没有办法让孩子DIV的宽度比父DIV使用CSS？
有一种方法可以在父容器DIV内有一个比它的父级宽的子DIV。 子DIV需要与浏览器视口的宽度相同。
看下面的例子： 
孩子DIV 必须作为母公司的子女。 我知道我可以在子div上设置任意的负边距，使其更宽，但是我无法弄清楚如何使浏览器的宽度达到100％。
我知道我可以做到这一点：
.child-div{ margin-left: -100px; margin-right: -100px; } 但是我需要孩子和dynamic的浏览器一样宽。
更新
感谢您的回答，目前看来最接近的答案是让孩子的DIV位置：absolute，并将左右属性设置为0。
我的下一个问题是父母的位置：relative，这意味着左侧和右侧的属性仍然是相对于父div而不是浏览器，请看这里的例子： jsfiddle.net/v2Tja/2
我不能删除相关的位置相对父母没有拧其他的一切。
使用绝对定位
.child-div { position:absolute; left:0; right:0; }
这个问题更现代的解决scheme是使用视口单元vw和calc() 。
将子元素的width设置为视口宽度的100％，即100vw 。 然后将子元素的视口宽度的50％ – 减去父元素宽度的50％ – 向左移动以使其与屏幕的边缘相交。
body, html, .parent { height: 100%; width: 100%; text-align: center; padding: 0; margin: 0; } .parent { width: 50%; max-width: 800px; background: grey; margin: 0 auto; position: relative; } .child-element { position: relative; width: 100vw; left: calc(-50vw + 50%); height: 50px; background: blue; }
<div class='parent'> parent element <div class='child-element'>child-element</div> </div>
根据您的build议原创build议（设置负边距），我尝试了一下使用dynamic浏览器宽度的百分比单位的类似方法：
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; }
负边距将使内容stream出父DIV。 所以我设置了padding: 0 100%; 将内容推回到Chlid DIV的原始边界。
负边距也会使.child-div的总宽度扩展到浏览器的视口外，从而产生水平滚动。 因此，我们需要通过将一个overflow-x: hidden到祖父母DIV（这是Parent Div的父亲）来剪切挤压宽度：
这是JSfiddle
我曾试过尼尔斯·卡斯帕森（ left: calc(-50vw + 50%) ; 它在Chrome和FF（不知道IE浏览器）中工作得很好，直到我发现Safari浏览器没有正确执行。 希望他们尽快解决这个问题，因为我真的喜欢这个简单的方
这也可以解决您的问题，其中父DIV元素必须是position:relative
这种解决方法的两个缺点是：
- 需要额外的标记（即祖父母元素（就像好的桌子垂直alignment方法是不是…）
- Child DIV的左右边界将永远不会显示，因为它们不在浏览器的视口中。
请让我知道，如果你有这个方法find任何问题;）。 希望它有帮助。
我已经search了很长一段时间这个问题的解决scheme。 理想情况下，我们希望让孩子比父母更大，但是事先不知道父母的约束。
我终于在这里find了一个很好的通用答案。 逐字复制：
这里的想法是：将容器推到浏览器窗口的正中间，左边：50％;然后拉回到左边缘，边缘为负50vw。
.child-div { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
我用这个：
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; }
你可以试试位置：绝对。 并给予宽度和高度，顶部：'从顶部的y轴'和左：'x轴'
我有一个类似的问题。 子元素的内容应该保留在父元素中，而背景必须扩展完整的视口宽度。
我解决了这个问题，通过使子元素position: relative并添加一个伪元素（ :before ）与position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; 。 伪元素作为伪背景元素停留在实际的子元素后面。 这适用于所有的浏览器（即使是IE8 +和Safari 6+也不能testing旧版本）。
小例子小提琴： http : //jsfiddle.net/vccv39j9/
添加到Nils Kaspersson的解决scheme，我也解决了垂直滚动条的宽度。 我使用16px作为一个例子，从视图端口宽度减去。 这将避免出现水平滚动条。
width: calc(100vw - 16px); left: calc(-1 * (((100vw - 16px) - 100%) / 2));
.parent { margin:0 auto; width:700px; border:2px solid red; } .child { position:absolute; width:100%; border:2px solid blue; left:0; top:200px; }
我知道这是旧的，但对于任何人来这个答案，你会这样做：
溢出隐藏在包含父元素（如正文）的元素上。
给你的子元素的宽度比你的页面宽得多，并把它的绝对位置保持-100％。
下面是一个例子：
body { overflow:hidden; } .parent{ width: 960px; background-color: red; margin: 0 auto; position: relative; } .child { height: 200px; position: absolute; left: -100%; width:9999999px; }
还有一个JS小提琴： http : //jsfiddle.net/v2Tja/288/
其他答案对于你有一个遥远的祖先div用来定位你想要居中的div的左右边缘（例如页面主体）的特殊情况是很好的。
然而，你通常想要定位一个元素X，该元素X比父元素的父元素集中。 然后你可以让父母相对定位，并简单地将X的left right为适当的负数：
<div id="container-div"> <div id="normal-element>Something</div> <div id="wide-element>Some text</div> </div>
然后：
#container-div { position: relative; } #normal-element { margin: 0 auto; } #wide-element { position: absolute; left: -100px; right: -100px; text-align: center; }
示例结果：
