Html 如何扩展子div的宽度以超出父div'；宽度是多少？

我在另一个

div

中有几个

div

（我们称之为容器），我想知道是否可以将子

div

的宽度扩展到容器

div

的宽度之外

如果你能看看这个，解释起来就容易多了

目前，容器

div

的宽度为80%，所有子容器

div

s的宽度也为80%。我想将第一个

div

的宽度扩展到100%，以便它完全水平填充页面

我将如何实现这一点？ 顺便说一下，我之所以要这样做，是因为我使用的是由提供的网格结构，它要求所有内容都必须包含在容器

div

中，才能获得该结构提供的功能

---

EDIT:我刚刚意识到容器的宽度

div

是用px指定的，而不是用jsfiddle示例中的%指定的。因此，将子

div

的宽度设置为120%并不能保证水平填充页面。我应该如何处理我的问题？我现在唯一能想到的方法是在px中获得屏幕宽度，但我认为在CSS中这是不可能的。

将

溢出：可见
添加到父div，即
.container

.container {
    width: 80%;
    margin: 0px auto;
    overflow:visible;
}

#greendiv {
    background-color: green;
    width:500px;
}

我不会这么做，但它似乎有效：

#greendiv {
  width:120%;
  margin-left:-10%;
  background-color: green;
}

看

为什么
#greendiv
不能在
.container
或其他包装器
div
之前


编辑。将您的想法颠倒过来（不是真的，只是在强制容器中创建一个自定义容器，这里的
.yellowdiv
s是自定义容器，
#greendiv
是容器中的全宽容器）：

请参阅。
我通过这样做得到了您所要求的：

#greendiv {
   background-color: green;
   width: 140%;
   margin-left: -20%;
}

但我认为这不是一个好的做法…
如果父容器居中对齐，则可以在左侧和右侧使用负边距：

#greendiv {
    background-color: green;
    margin: 0 -12.5%;
}

请看这里的fiddle-
将内容扩展到包装容器之外通常不是一个好主意，但如果必须这样做，我肯定会使用这样的相对定位

#greendiv {
    position:relative;
    left:-10%;
    width:120%;
    background-color: green;
}

您还可以使用其他单位，如
px
，以获得更精确的结果。
Hi，这很有效！然而，我意识到容器的宽度实际上是基于px。。。因此，将宽度指定为120%是行不通的。如何扩展它，使其完全水平填充页面？我可能需要在px中获得屏幕的宽度，但我认为在CSS中这是不可能的。关于
#greendiv
不能外出的原因，请阅读我问题的最后一段。@CookieMonester您可以定义
容器的宽度（以像素为单位），120%仍然有效。它是
容器的宽度值的百分比，不是精确值（但您可能需要测试/计算以获得正确的数字）。如果一切都必须在容器内，请考虑做出一些改变。请看我编辑的答案。谢谢。但不幸的是，我不想将容器的宽度更改为100%，因为我希望在左右两侧都有一些边距，以获得更好的视觉体验。此容器
div
包含我的页面的全部内容。有解决办法吗？或者我只是错误地使用了网格结构…@cookiemonster您不必将宽度设置为100%。如果你愿意，它可以是960像素。只需将
.yellowdiv
s设置为80%的宽度。这个Fiddle（）更清楚地说明了
.custom\u container
的概念，但实际上您并不需要
.custom\u container
div
，正如您在这里看到的：非常感谢！这真的很有帮助。这很好，我不知道负利润。但是，如果容器
div
的宽度是在px中定义的，我该怎么办？我应该使用什么样的边距值来保证水平填充页面？如果是这种情况，您将不得不依赖基于JS的解决方案。CSS稍微复杂一点，因为当触发
.resize（）
事件时，您必须重新计算边距：）请将正确显示问题的代码添加到此问题中。那么
px
中容器的宽度是多少？您好，容器
div
的CSS是
{位置：相对；宽度：960px；边距：0自动；填充：0；}
。谢谢。最简单的方法就是把那个div移出容器，然后使用宽度：100%是的，如果可以的话，这就是我想做的。。。但重要的是我要把它放在里面，因为如果我不这样做，
div
在移动设备上就不会被调整大小。这种效果是由我在问题中发布的网站上使用的网格结构提供的。如果你的宽度设置为100%，通常会调整大小：）
#greendiv {
    position:relative;
    left:-10%;
    width:120%;
    background-color: green;
}