.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Browser support for vw, and for calc(, 一般可视为IE9和新版本。

<>说明: 这一盒式模型被设定为 Border- Box。 如果没有<条码>边界箱,你还必须绕过婚礼和边界,使这一解决办法成为一纸空文。

<>说明: 令人感到鼓舞的是,某些浏览器尽管没有过度流入,仍可能选择展示横向滚动屏障,从而掩盖了你的滚动集装箱的横向外流。

我在很长一段时间内寻求解决这一问题。 理想的做法是,我们想要让孩子比父母多,但事先不知道父母的制约因素。

And I finally found a brilliant generic answer here. Copying it verbatim:

The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

根据你的建议原建议(确定负差),我尝试并提出了使用百分单位进行动态浏览器的类似方法:

<><><><>>><>>>>><>>>>>>

<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;
    }

不利幅度将使得内容从父母四肢解中流出。 因此,我确定了<条码>:100%;,将内容推回Chlid DIV的原始边界。

负差还将使child子的总宽度从浏览室中扩大,从而形成横向的滚动。 因此,我们需要通过向祖父母DIV(父母离异的父母)适用<条码>over-x:隐藏的<>/条码>,来揭穿外衣:

www.un.org/Depts/DGACM/index_spanish.htm 这里是JSfiddle。

我已尝试过Nils Kaspersson sleft:calc(-50vw + 50%);它在 Chrome和amp做了精干的罚款;FF(不是确定IE, 还是),直到我发现Safaribrowsers没有适当做。 我希望他们在我实际上喜欢这一简单方法时就确定这一点。

This also may resolve your issue where the Parent DIV element has to be position:relative

这一工作方式的2个缺点是:

• Require extra markup (i.e a grandparent element (just like the good ol table vertical align method isn t it...)
• The left and right border of the Child DIV will never show, simply because they are outside of the browser s viewport.

Please let me know if there s any issue you find with this method ;). Hope it helps.

Flex Box可用于使子女比父母更宽泛,分三条线路。

Only the child’s display, margin-left and width need to be set. margin-left depends on the child’s width. The formula is:

margin-left: calc(-.5 * var(--child-width) + 50%);

基础设施服务变量可用于避免人工计算左边。

<>Demo #1: 人工计算<>

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

www.un.org/Depts/DGACM/index_spanish.htm 第2号:使用CSS变量

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

I used this:

传真

<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;
}

我尝试了一些解决办法。 一、导 言

margin: 0px -100%;
padding: 0 100%;

迄今为止,这是最好的,因为我们不需要额外的小屏幕。

I had a similar issue. The content of the child element was supposed to stay in the parent element while the background had to extend the full viewport width.

I resolved this issue by making the child element position: relative and adding a pseudo element (:before) to it with position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. The pseudo element stays behind the actual child as a pseudo background element. This works in all browsers (even IE8+ and Safari 6+ - don t have the possibility to test older versions).

Small example fiddle:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

这里还有一份联合材料:。 http://jsfiddle.net/v2Tja/288/。

除了Nils Kaspersson的解决方案外,我也正在解决垂直滚动的 w。 我正在使用<代码>16px,作为实例,从观察区转出。 这将避免出现横向滚动障碍。

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Assuming the parent has a fixed width, e.g #page { width: 1000px; } and is centered #page { margin: auto; }, you want the child to fit the width of browser viewport you could simply do:

#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;
}

然后解决办法如下。

<><><><>>><>>>>><>>>>>>

<div class="parent">
    <div class="child"></div>
</div>

<>CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

这样做的一个途径是根本不使用任何儿童,仅仅制造两个单独的小区,将其定位在另一个地方。 你们只能使顶上的灰.有100伏。 你们也可以把这种方法带给他们。

#parent-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 90vh;
  border: 3px solid black;
  background: red;
}
#child-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 50vh;
  border: 3px solid black;
  background: grey;
}

<div id="parent-div">
  <div id="child-div">
  </div>
</div>

EDIT; for your example:

#parent-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 960px;
  height: 100vh;
  border: 3px solid black;
  background: red;
}
#child-div {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 33vh;
  border: 3px solid black;
  background: grey;
}

<div id="parent-div">
  <div id="child-div">
  </div>
</div>