css - 将嵌套容器扩展到页面宽度

Question

我有一个固定宽度为 960px 的 DIV 和没有特定宽度的嵌套容器，因此它们延伸到父容器。是否可以在不移除外部容器的情况下将内部容器拉伸(stretch)到整个页面宽度，同时内容应与外部容器一样宽。

一个小例子:

+------------------------------------------------+  
|                      browser window (100%)     |
|                                                |
|     +-----------------------------------+      | 
|     | (A)     inner container (960px)   |      | 
|     |                                   |      | 
|*****|***********************************|******| 
|     |  (B)                              |      | 
|     |                                   |      | 
|     |  this should stretch to 100% of   |      | 
|     |   body and have inner width of    |      | 
|     |     of 960px (or the same as      |      | 
|     |         closest parent)           |      | 
|     |                                   |      | 
|*****|***********************************|******| 
|     |                                   |      | 
|     +-----------------------------------+      | 
|                                                | 
+------------------------------------------------+

这背后的原因是我必须指定 block 的一些背景，但如果我删除指定固定宽度的外部容器，我会遇到问题。

更新:内部容器 (B) 应该在 (A) 内，如下所示:

<div class="container" style="width:960px">
       <div class="box">
            This box should stretch to 100% of page and must have non-fixed height.
       </div>
</div>

页面上应该有多个容器，其中一些应该拉伸(stretch)，一些不拉伸(stretch)。绝对定位打破了文档的正常流动，后续容器与前一个容器重叠。

Answer 1

你可以使用绝对位置

演示 http://jsfiddle.net/kevinPHPkevin/C8tnP/2/

.box {
    background:#ccc;
    position:absolute;
    left:0;
    right:0;
}