有没有办法让孩子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

这个问题的一个更现代的解决方案是使用视口单元width 和left.

将border-box子元素的值设置为视口宽度的100%,或border-box.然后将子元素的50%视口宽度 - 减去父元素宽度的50%- 移动到左侧,使其与屏幕边缘相交.

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

这是一个演示.

浏览器对vw和calc()的支持通常可以看作是IE9 +.

注意:这假定框模型设置为width.没有left,你还必须减去填充和边框,使这个解决方案变得一团糟.

Answer 2

使用绝对定位

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

Answer 3

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

我终于在这里找到了一个很棒的通用答案.逐字复制:

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

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

Answer 4

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

\n\n

只需要设置child\xe2\x80\x99sdisplay和margin-left。取决于 child\xe2\x80\x99s 。公式为：widthmargin-leftwidth

\n\n

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

\n\n

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

\n\n

演示 #1：手动计算

\n\n

\r\n

\r\n

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

\r\n

.parent {\r\n  background-color: aqua;\r\n  height: 50vh;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  width: 50vw;\r\n}\r\n\r\n.child {\r\n  background-color: pink;\r\n  display: flex;\r\n}\r\n\r\n.wide {\r\n  margin-left: calc(-37.5vw + 50%);\r\n  width: 75vw;\r\n}\r\n\r\n.full {\r\n  margin-left: calc(-50vw + 50%);\r\n  width: 100vw;\r\n}

\r\n

\r\n

\r\n

\n\n

演示 #2：使用 CSS 变量

\n\n

\r\n

\r\n

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

\r\n

.parent {\r\n  background-color: aqua;\r\n  height: 50vh;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  width: 50vw;\r\n}\r\n\r\n.child {\r\n  background-color: pink;\r\n  display: flex;\r\n  margin-left: calc(-.5 * var(--child-width) + 50%);\r\n  width: var(--child-width);\r\n}\r\n\r\n.wide {\r\n  --child-width: 75vw;\r\n}\r\n\r\n.full {\r\n  --child-width: 100vw;\r\n}

\r\n

\r\n

\r\n

\n

Answer 5

根据您的建议原始建议(设置负边距),我尝试并使用百分比单位为动态浏览器宽度提出类似的方法:

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和FF中工作得很好(还不确定IE),直到我发现Safari浏览器没有正确完成.希望他们尽快解决这个问题,因为我真的很喜欢这个简单

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

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

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

如果您发现此方法存在任何问题,请告诉我们;).希望能帮助到你.