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

有没有一种方法可以在比其父对象更宽的父容器DIV中包含子DIV。子DIV必须与浏览器视口的宽度相同。

请参见下面的示例：

子DIV 必须保留为父div的子。我知道我可以在子div上设置任意的负边距以使其更宽，但是我不知道如何从根本上使它成为浏览器宽度的100％。

我知道我可以这样做：

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

但是我需要孩子的宽度与动态浏览器的宽度相同。

更新资料

感谢您的回答，到目前为止，似乎最接近的答案是将子DIV位置设置为绝对位置，并将left和right属性设置为0。

我遇到的下一个问题是父级具有position：relative，这意味着left和right属性仍然相对于父级div而不是浏览器，请参见此处的示例：jsfiddle.net/v2Tja/2

如果不搞砸其他事情，我就不能从父母那里删除相对位置。

使用绝对定位

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

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

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

我们设置 width子元素的设置为填充整个视口的宽度，然后通过将其移动到left视口一半的距离（减去父元素宽度的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>

浏览器对大众和大众的支持 calc（）的通常可以看作是IE9和更高版本。

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

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

很长时间以来，我一直在寻找解决此问题的方法。理想情况下，我们希望孩子比父母大，但又不事先知道父母的约束。

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

这里的想法是：将容器向左推到浏览器窗口的正中间：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;
    }

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

负边距还会使.child-div的总宽度扩展到浏览器的视口之外，从而导致水平滚动。因此，我们需要通过应用overflow-x: hidden祖母DIV（父父Div的父代）：

这是JSfiddle

我曾尝试过尼尔斯·卡斯珀森的left: calc(-50vw + 50%)；直到我发现Safari浏览器无法正常运行，它在Chrome＆FF（还不确定IE）中都能正常工作。希望他们在我真正喜欢此简单方法后尽快解决此问题。

这也可以解决您的问题，其中父DIV元素必须是 position:relative

此替代方法的两个缺点是：

• 需要额外的标记（例如，祖父母元素（就像不错的ol'table垂直对齐方法是一样的...）
• 子DIV的左右边框永远不会显示，仅因为它们在浏览器的视口之外。

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

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

只有孩子的display，margin-left并且width需要设置。margin-left取决于孩子的width。公式为：

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

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

演示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>

演示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>

我用这个：

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

您可以尝试的位置：绝对。并给出width和height，top：“从顶部开始的y轴”，左：“ x轴”

我有一个类似的问题。子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度。

我通过制作子元素position: relative并使用添加一个伪元素（:before）来解决了这个问题position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;。伪元素作为伪背景元素留在实际孩子的后面。这在所有浏览器中都适用（即使是IE8 +和Safari 6+，也无法测试较旧的版本）。

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

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

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

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

.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/

然后解决方法如下。

的HTML

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

的CSS

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

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

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

到目前为止是最好的，因为对于较小的屏幕，我们不需要额外的CSS。我制作了一个codePen来显示结果：我使用了带有背景图像的父div和带有内部内容的子divon div。

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