有一种方法，使一个子DIV's宽度比父DIV使用CSS?

是否有一种方法可以让父容器DIV中的子DIV比父容器DIV宽。子DIV需要与浏览器视口的宽度相同。

参见下面的例子: enter image description here

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

我知道我能做到:

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

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

更新

谢谢你的回答，到目前为止，似乎最接近的答案是使子DIV position: absolute，并将左右属性设置为0。

下一个问题是，我有父有position: relative，这意味着左右属性仍然是相对于父div，而不是浏览器，见例子这里:jsfiddle.net/v2Tja/2

我不能从父对象中删除position: relative而不搞砸其他一切。

273637 次浏览
小开

你可以试试position: absolute。然后给出宽度和高度，top: 'y轴从顶部开始' 左:'x-axis'

小开
最佳答案

使用绝对定位

.child-div {
position:absolute;
left:0;
right:0;
}
小开 
.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/

小开
我也有类似的问题。 子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度 我通过使子元素position: relative并使用position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;向它添加一个伪元素(:before)来解决这个问题。 伪元素作为伪背景元素留在实际的子元素后面。这适用于所有浏览器(甚至IE8+和Safari 6+ -没有可能测试旧版本)

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

小开

下面是一个通用的解决方案，将子元素保留在文档流中:

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

浏览器对大众和钙()的支持通常可以被视为IE9或更新版本。

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

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

小开

基于你最初的建议(设置负边距)，我已经尝试并提出了一个类似的方法，使用百分比单位的动态浏览器宽度:

超文本标记语言

<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的父DIV)来剪辑挤出宽度:

这里是JSfiddle

我试过Nils Kaspersson的left: calc(-50vw + 50%);它在Chrome &FF(还不确定IE)，直到我发现Safari浏览器不能正常运行。希望他们尽快解决这个问题，因为我实际上喜欢这个简单的方法。

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

这种变通方法的2个缺点是:

  • 需要额外的标记(即祖父母元素(就像好的ol' table垂直对齐方法不是吗…)
  • Child DIV的左右边界永远不会显示，因为它们在浏览器的视口之外。

如果你发现这种方法有任何问题，请让我知道;)。希望能有所帮助。

小开

我用了这个:

超文本标记语言

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

添加到Nils Kaspersson的解决方案，我正在解决垂直滚动条的宽度。我以16px为例，它从视图宽度中减去。这将避免出现水平滚动条。

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

很长一段时间以来，我一直在到处寻找这个问题的解决办法。理想情况下，我们希望子进程大于父进程，但不需要事先知道父进程的约束条件。

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

这里的想法是:将容器推到 浏览器窗口左:50%;，然后将其拉回左边缘 与负-50vw边际。

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

假设父对象有一个固定的宽度，例如#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 class="parent">
<div class="child"></div>
</div>

CSS

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

要使子div与内容一样宽，请尝试以下方法:

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

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>

小开

我尝试了你的一些解决方案。这个:

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

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

< a href = " https://codepen。io/yuyazz/pen/BaoqBBq" rel="nofollow noreferrer">https://codepen.io/yuyazz/pen/BaoqBBq


提交答案