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

Question

是否有办法让父容器DIV中的子DIV比它的父容器宽。子DIV需要与浏览器视口的宽度相同。

见下面的例子：

孩子DIV 必须作为父div的孩子。我知道我可以在子div上设置任意负边距以使其更宽，但我无法弄清楚如何基本上使其100％宽度的浏览器。

我知道我可以这样做：

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

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

更新

感谢您的回答，到目前为止，似乎最接近的答案是使子DIV位置：绝对，并将左右属性设置为0.

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

我不能删除相对于父母的位置而不会搞砸其他所有内容。

Answer 1

此问题的更现代化的解决方案是使用视口单元vw和calc()。

将子元素的width设置为视口宽度的100％，或100vw。然后将子元素50％的视口宽度 - 减去父元素宽度的50％ - 向左移动，使其与屏幕边缘相交。

＆＃13;

＆＃13;

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

＆＃13;

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Here's a demo。

vw和calc()的浏览器支持通常可以视为IE9 +。

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

Answer 2

使用绝对定位

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

Answer 3

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

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

  

这里的想法是：将容器推到中间位置   左边的浏览器窗口：50％;然后将其拉回到左边缘   负-50vw保证金。

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

Answer 4

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

<强> 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（父节点的父节点）来剪切挤出宽度：

以下是JSfiddle

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

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

的问题

此变通方法的两个缺点是：

• 需要额外的标记（即祖父元素（就像好的ol'表垂直对齐方法不是......）
• Child DIV的左右边框永远不会显示，只是因为它们位于浏览器的视口之外。

如果您使用此方法发现任何问题，请告诉我们;）。希望它有所帮助。

Answer 5

我用过这个：

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

Answer 6

你可以试试位置：绝对。并给出宽度和高度，顶部：'y轴从顶部' 左：'x轴'

Answer 7

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

我通过创建子元素position: relative并使用:before向其添加伪元素（position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;）来解决此问题。 伪元素作为伪背景元素保留在实际子元素后面。这适用于所有浏览器（即使是IE8 +和Safari 6+ - 也无法测试旧版本）。

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

Answer 8

添加到Nils Kaspersson的解决方案，我也在解析垂直滚动条的宽度。我使用16px作为示例，从视口宽度中减去。这样可以避免出现水平滚动条。

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

Answer 9

假设父对象的宽度固定，例如vertx.deployVerticle(YourVerticle.class.getName(), new DeploymentOptions().setWorker(true)); 并且居中位于#page { width: 1000px; }，那么您希望子对象适合您可以简单执行的浏览器视口的宽度：

#page { margin: auto; }

Answer 10

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

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

到目前为止，

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

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

Answer 11

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Answer 12

我知道这已经过时了，但是对于那些来这里寻求答案的人来说，你会这样做：

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

为您的子元素指定一个比您的页面宽得多的宽度，并将它的绝对值放置在-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/

Answer 13

然后将是以下解决方案。

HTML

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

CSS

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

Answer 14

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

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

Answer 15

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>