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

Camsoft 200 html css

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

见下面的例子: 在此输入图像描述

孩子DIV 必须留在父母div的孩子身边.我知道我可以在子div上设置任意负边距以使其更宽,但我无法弄清楚如何基本上使其100%宽度的浏览器.

我知道我可以这样做:

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

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

更新

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

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

我无法移除相对于父母的位置而不会搞砸其他所有内容.

Nils Kaspers.. 200

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

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

这是一个演示.

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

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

  • 大众不好.如果你有一个垂直滚动条,那么100vw会给你一个水平滚动条. (16认同)
  • 这正是我所寻找的,非常感谢你.IMO这是一个比接受的答案更好的答案,因为这不会打破文件流 (12认同)
  • 你知道什么,它确实在IE9中有效.+1很好 (4认同)
  • 这是将更宽的子元素包装到`position:relative`父级的正确答案! (3认同)
  • 看起来这只能降低一级.无论子元素有多少个父元素,它有没有办法工作? (2认同)

Blowsie.. 105

使用绝对定位

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

  • 好的,接下来的问题,如果父母或另一个祖先有布局,即位置:亲属,请参阅:http://jsfiddle.net/v2Tja/2/ (13认同)
  • 有没有办法做到这一点,.child-div的高度自动,并在下面仍然有正确的位置? (9认同)
  • 并且不要将父div设置为“ overflow:hidden” ^^ (2认同)

dangom.. 11

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

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

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

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


小智.. 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的左右边框永远不会显示,只是因为它们位于浏览器的视口之外.

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