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


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

见下面的例子: enter image description here

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

我知道我可以这样做:

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

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

更新

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

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

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


163
2018-04-07 12:30


起源


你的要求没有多大意义。 “子div”必须保留为父div的子级,而父级div必须保留 position: relative?你需要什么 position: relative 对于?我想我要问的是:你想做什么? - thirtydot
@Camsoft您是否看到我对我的回答的评论?这对我有用,也请查看我的网站 edocuments.co.uk 以不同的方式做你想做的事 - Blowsie
@Camsoft另外,你的解决方案中确实不需要任何jquery / js - Blowsie


答案:


使用绝对定位

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

86
2018-04-07 12:34



好的,接下来的问题,如果父母或其他祖先有布局,即位置:亲属,请参阅: jsfiddle.net/v2Tja/2 - Camsoft
如何另一个父div是position:static,另一个div里面有position:relative? jsfiddle.net/blowsie/v2Tja/3 - Blowsie
有没有办法做到这一点,.child-div的高度自动,并在下面仍然有正确的位置? - Philippe Gilbert
并且不要将父div设置为“overflow:hidden”^^ - chris
怎么修复Camsoft说的? jsfiddle.net/v2Tja/271 - Павел Иванов


这个问题的一个更现代的解决方案是使用视口单元 vw  和 calc()

设置 width 子元素的百分比为视口宽度的100%,或 100vw。然后移动子元素50%的视口宽度 - 减去50%的视口宽度 父元素 width - 向左,使其符合屏幕边缘。

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;
}
<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

这是一个演示

浏览器支持 VW 并为 计算值() 一般可以看作是IE9 +。

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


176
2017-07-22 19:02



你知道什么,它确实在IE9中有效。 +1很好 - CatShoes
这正是我正在寻找的,非常感谢你。 IMO这是一个比接受的答案更好的答案,因为这不会打破文件流 - Rémi
大众不好。如果你有一个垂直滚动条,那么100vw会给你一个水平滚动条。 - Sunny
看起来这只能降低一级。无论子元素有多少父元素,它有没有办法工作? - mythofechelon
这是将更宽的子元素包装成一个的正确答案 position: relative 父! - Hanfei Sun


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

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

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


5
2017-09-14 01:40





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

我终于找到了一个出色的通用答案 这里。 逐字复制:

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

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

5
2017-12-22 23:04



我发现如果我希望它是,例如,视口宽度的90%,我可以使用上面但设置宽度 90vw。而且,它似乎 margin-right 在任何情况下都没有效果。 - Jason Dufair


我用过这个:

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

3
2017-10-15 09:15





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


1
2018-04-07 12:34





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

我通过制作子元素解决了这个问题 position: relative 并添加一个伪元素(:before用它来 position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;。 伪元素作为伪背景元素保留在实际子元素后面。这适用于所有浏览器(甚至IE8 +和Safari 6+ - 无法测试旧版本)。

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


1
2018-06-30 12:29



这似乎有效,但它导致浏览器显示水平滚动条,因为宽度为4000px。将伪元素保持在视口宽度内的解决方法是什么? - Aaron Hudon
当然你必须设置正文或页面包装div overflow-x: hidden。 - Seika85


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

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

1
2018-02-06 10:12



我相信 16px 你需要减去它,因为它导致水平滚动条是浏览器的默认边距/填充,而不是减去它只是使用这个 html, body{ margin:0; padding:0 } 因此,你不需要为此进行额外的计算 16px - Mi-Creativity
这是当页面内容较长并且低于折叠并且滚动条自动出现时。当然,当内容在折叠内时,不需要这样做。只有当我知道页面内容很长并且确实会出现滚动条时,才将16px添加到公式中。 - A-Zone
我认为它不适用于移动设备。手机没有滚动条。 - hjchin