如何擴展子div的寬度超出父div的寬度？

Question

我在另一個div有幾個div （讓我們稱之為容器）我想知道是否有可能擴展子div的寬度超出容器div的寬度。

如果你能看看這個jsfiddle，你會更容易解釋。

目前，該容器div有80％的寬度，這樣做的所有孩子div秒。 我想將第一個div的寬度擴展到100％，以便它完全填充頁面水平。

我怎么做到這一點？ 順便說一句，我想這樣做的原因是因為我使用了由此提供的網格結構，並且它要求必須將eveything包含在容器div中以獲得結構提供的功能。

編輯：我剛剛意識到容器div的寬度是在px中指定的，而不是在jsfiddle示例中指定的％。 因此，將子div的寬度設置為120％並不能保證水平填充頁面。 我該如何處理我的問題？ 我現在能想到的唯一方法就是在px中獲得屏幕的寬度，但我不認為在CSS中這是可能的。

Answer 1

我不會這樣做，但它似乎工作：

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

看小提琴 。

為什么#greendiv不能在.container或其他包裝器div ？

---

編輯。 讓你思考顛倒（不是真的，只需在自定義容器內部創建一個自定義容器，這里.yellowdiv是自定義容器， #greendiv是容器內的全#greendiv器）：

.container {
  width: 100%;//or some amount of pixels and the yellow divs follow that setting
  margin: 0px auto;
}

.yellowdiv {
  width:80%;
  margin-left:10%;
  border: solid 1px;
  background-color: yellow;
}
#greendiv {
  background-color: green;
}

看小提琴 。

Answer 2

如果父容器是中心對齊的，則可以在左側和右側使用負邊距：

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

請看這里的小提琴 - http://jsfiddle.net/CtsTQ/12/

Answer 3

添加overflow:visible對父div顯示為.container 。

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

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

現場演示

Answer 4

好吧，通過這樣做，我得到了你所要求的：

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

但我認為這不是一個好習慣......

Answer 5

將東西擴展到包裝容器之外通常不是一個好主意，但如果我必須這樣做，我肯定會使用這樣的相對定位。

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

您還可以使用其他單位（如px來獲得更精確的結果。