扩展嵌套容器以适应页面宽度。

Question

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

以下是一个小例子：

+------------------------------------------------+  
|                      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)           |      | 
|     |                                   |      | 
|*****|***********************************|******| 
|     |                                   |      | 
|     +-----------------------------------+      | 
|                                                | 
+------------------------------------------------+

这么做的原因是我需要指定块的某些背景，但如果我删除指定固定宽度的外部容器，则会遇到问题。

更新：内部容器（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>

页面上应该有多个容器，其中一些应该可以拉伸，而另一些则不能。绝对定位会破坏文档的正常流程，并导致后面的容器与前面的容器重叠。

- Deniss Kozlovs

Answer 1

你可以使用绝对定位

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

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

- Kevin Lynch

---

你好，这个有一点难度，我更新了问题以澄清。 - Deniss Kozlovs

如果我将多个容器依次放置，它们不会使用绝对定位堆叠 :( - Deniss Kozlovs

Answer 2

对于涉及的每个元素，请将以下内容添加到其CSS中：

'box-sizing: border-box;'

一定要添加供应商前缀。

- Qristhal

Answer 3

你有两种方法可以做到这一点：

1. 你的100%宽度元素应该是的子元素，然后在里面再指定960px的容器。查看这个fiddle

2. 将那个100%宽度的元素作为绝对元素使用。查看这个fiddle

- gustavohenke

---

很遗憾，我无法走出指定固定宽度的父容器，而第二种方法会破坏文档的流程，绝对定位的盒子后面的所有内容都不会直接出现在它后面。 - Deniss Kozlovs