3

我有一个固定宽度为 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>

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

4

3 回答 3

1

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

'框尺寸：边框框；'

请务必添加供应商前缀。

于 2013-05-18T19:40:08.663 回答
1

你可以使用绝对位置

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

.box {
    background:#ccc;
    position:absolute;
    left:0;
    right:0;
}
于 2013-05-18T18:41:04.177 回答
0

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

  1. 您的 100%-width 元素应该是 的子元素<body>，然后在其中再次指定 960px 的容器。看到这个小提琴

  2. 将该 100% 宽度的元素用作绝对元素。看到这个小提琴

于 2013-05-18T18:42:37.277 回答