Question

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

一个小例子：

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

页面上应该有多个容器，其中一些应该伸展，有些则不伸展。绝对定位会破坏文档的正常流程，后续容器会与之前的容器重叠。

Answer 1

你可以使用绝对位置

DEMO http://jsfiddle.net/kevinPHPkevin/C8tnP/2/

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

Answer 2

对于涉及的每个元素，将其添加到其CSS：

'box-sizing：border-box;'

请务必添加供应商前缀。

Answer 3

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

您的100％-width元素应该是<body>的子元素，然后在其中，再次指定该容器为960px。 See this fiddle
使用100％-width元素作为绝对元素。 See this fiddle

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

3 个答案: