有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？

这是一个将子元素保留在文档流中的通用解决方案：

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

我们将子元素的 width 设置为填充整个视口宽度，然后将其移动到 left 的距离为视口的一半，减去父元素的 50%，使其与屏幕边缘相遇宽度。

演示：

{ 框尺寸：边框框； } 正文 { 边距：0;溢出-x：隐藏； } .parent { 最大宽度：400px;边距：0 自动；填充：1rem；位置：相对；背景颜色：深灰色； } .child { 宽度：100vw;位置：相对；左：计算（-50vw + 50%）；高度：100px；边框：3px 纯红色；背景颜色：浅灰色； }

浏览器对 vw 和 calc() 的支持通常可以视为 IE9 和更新版本。

注意：这假设盒子模型设置为 border-box。如果没有 border-box，您还必须减去填充和边框，从而使这个解决方案变得一团糟。

注意：鼓励隐藏滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。

---

使用绝对定位

.child-div {
    position:absolute;
    left:0;
    right:0;
}

---

长期以来，我一直在广泛地寻找解决这个问题的方法。理想情况下，我们希望孩子大于父母，但事先不知道父母的约束。

我终于找到了一个绝妙的通用答案here。逐字复制：

这里的想法是：将容器推到浏览器窗口的正中间，left: 50%;，然后以负 -50vw 边距将其拉回左边缘。

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

---

根据您的建议原始建议（设置负边距），我尝试并提出了一种类似的方法，使用百分比单位作为动态浏览器宽度：

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

负边距会让内容流出 Parent DIV。因此，我设置 padding: 0 100%; 将内容推回到 Chlid DIV 的原始边界。

负边距也会使 .child-div 的总宽度超出浏览器的视口，从而导致水平滚动。因此，我们需要通过将 overflow-x: hidden 应用到祖父 DIV（它是父 Div 的父级）来剪裁挤出宽度：

这是JSfiddle

我试过 Nils Kaspersson 的 left: calc(-50vw + 50%)；它在 Chrome & FF（还不确定 IE），直到我发现 Safari 浏览器不能正常工作。希望他们尽快解决这个问题，因为我真的喜欢这个简单的方法。

这也可以解决您的父 DIV 元素必须为 position:relative 的问题

这种变通方法的两个缺点是：

需要额外的标记（即祖父元素（就像好的 ol' table 垂直对齐方法不是......）

Child DIV 的左右边框永远不会显示，只是因为它们位于浏览器的视口之外。

如果您发现此方法有任何问题，请告诉我；）。希望能帮助到你。

---

Flexbox 可用于通过三行 CSS 使子项比其父项更宽。

只需要设置孩子的 display、margin-left 和 width。 margin-left 取决于孩子的 width。公式为：

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

CSS 变量可用于避免手动计算左边距。

演示#1：手动计算

.parent { 背景颜色：水色；高度：50vh；左边距：自动；边距右：自动；宽度：50vw； } .child { 背景颜色：粉红色；显示：弯曲； } .wide { margin-left: calc(-37.5vw + 50%);宽度：75vw； } .full { margin-left: calc(-50vw + 50%);宽度：100vw； }

演示 #2：使用 CSS 变量

.parent { 背景颜色：水色；高度：50vh；左边距：自动；边距右：自动；宽度：50vw； } .child { 背景颜色：粉红色；显示：弯曲； margin-left: calc(-.5 * var(--child-width) + 50%);宽度: var(--child-width); } .wide { --child-width: 75vw; } .full { --child-width: 100vw; }

---

我用这个：

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: relative 并使用 position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; 添加一个伪元素 (:before) 解决了这个问题。伪元素作为伪背景元素留在实际子元素后面。这适用于所有浏览器（甚至 IE8+ 和 Safari 6+ - 无法测试旧版本）。

小例子小提琴：http://jsfiddle.net/vccv39j9/

---

要使子 div 与内容一样宽，请尝试以下操作：

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

---

我尝试了你的一些解决方案。这个 ：

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

是迄今为止最好的，因为我们不需要额外的 css 来实现更小的屏幕。我制作了一个 codePen 来显示结果：我使用了一个带有背景图像的父 div，以及一个带有内部内容的子 divon div。

https://codepen.io/yuyazz/pen/BaoqBBq

---

您可以尝试位置：绝对。并给出 width 和 height , top: 'y axis from the top' 和 left: 'x-axis'

---

我知道这很旧，但是对于任何来此寻求答案的人，您都会这样做：

溢出隐藏在包含父元素的元素上，例如主体。

给您的子元素一个比您的页面宽得多的宽度，并将其绝对左侧定位为 -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 Fiddle：http://jsfiddle.net/v2Tja/288/

---

添加到 Nils Kaspersson 的解决方案中，我也在解决垂直滚动条的宽度问题。我以 16px 为例，它是从视口宽度中减去的。这将避免出现水平滚动条。

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

---

假设父级具有固定宽度，例如 #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;
}

---

那么解决方案将如下。

HTML

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

CSS

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

---