有没有办法让孩子DIV的宽度比使用CSS的父DIV宽？-Java 学习之路

168

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

见下面的例子：
enter image description here

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

我知道我可以这样做：

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

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

更新

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

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

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

12 回答

1
假设父级具有固定宽度，例如 #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;
}
```
回复于 2024-04-27T15:16:11+08:00
0
添加到Nils Kaspersson的解决方案，我也在解析垂直滚动条的宽度 . 我使用 16px 作为示例，从视口宽度中减去 . 这样可以避免出现水平滚动条 .
```
width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
```
回复于 2024-04-27T15:16:11+08:00
1

你可以尝试位置：绝对 . 并给出宽度和高度，顶部：'从顶部开始的y轴'和左边：'x轴'

回复于 2024-04-27T15:16:11+08:00
5
这个问题的一个更现代的解决方案是使用视口单元vw和calc（） .

将子元素的 width 设置为视口宽度的100％，或 100vw . 然后将子元素50％的视口宽度 - 减去父元素宽度的50％ - 移动到左侧，使其与屏幕边缘相交 .
```
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>
```
Here's a demo .

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

Note: 这假定框模型设置为border-box . 没有 border-box ，你还必须减去填充和边框，使这个解决方案变得一团糟 .
回复于 2024-04-27T15:16:11+08:00
0

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

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

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

回复于 2024-04-27T15:16:11+08:00

我用过这个：

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

回复于 2024-04-27T15:16:11+08:00

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 's total width expands out of the browser'的视口，从而产生水平滚动 . 因此，我们需要通过将 overflow-x: hidden 应用于祖父母DIV（父节点的父节点）来剪切挤出宽度：

Here is the JSfiddle

我试过Nils Kaspersson的 left: calc(-50vw + 50%) ;它在Chrome和FF中工作得很好（还不确定IE），直到我发现Safari浏览器没有正确完成 . 希望他们尽快解决这个问题，因为我真的很喜欢这个简单

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

此变通方法的两个缺点是：
- 需要额外的标记（即祖父元素（就像好的' table vertical align method isn'它...）
- Child DIV的左右边框永远不会显示，只是因为它们位于浏览器的视口之外 .
如果您使用此方法发现任何问题，请告诉我们;） . 希望能帮助到你 .
回复于 2024-04-27T15:16:11+08:00
1
我长期以来一直在寻找解决这个问题的方法 . 理想情况下，我们希望孩子比父母更大，但事先不知道父母的约束 .

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

这里的想法是：将容器推到浏览器窗口的正中间，左边：50％;然后将其拉回到左边缘，负-50vw边距 .
```
.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
```
回复于 2024-04-27T15:16:11+08:00

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

回复于 2024-04-27T15:16:11+08:00

179

然后解决方案如下 .

HTML

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

CSS

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

回复于 2024-04-27T15:16:11+08:00

使用绝对定位

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

回复于 2024-04-27T15:16:11+08:00

3
我知道这已经过时了，但对于任何人来到这里寻求答案你会这样做：

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

为您的子元素提供比页面宽得多的宽度，以及将它绝对放置-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/
回复于 2024-04-27T15:16:11+08:00

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

更新

12 回答

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

相关问题