將嵌套容器擴展爲頁面寬度

我有一個固定寬度爲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>

應該有在頁面上的多個容器，它們中的一些應伸展，一些不。絕對定位打破了文檔的正常流程，隨後的容器與之前的文檔重疊。

來源

2013-05-18 Deniss Kozlovs

你可以使用位置絕對

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

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

來源

2013-05-18 18:41:04 Vector

你好，這有點難，我更新了這個問題來澄清。 –

我編輯了我的答案 – Vector

如果我將多個容器一個接一個地放在一起，它們不會與絕對定位堆疊:( –

你有這樣做的方法有兩種：

你100％-width元素應該是<body>兒童，然後在裏面，再次指定960px的容器。 See this fiddle
使用該100％寬度元素作爲絕對元素。 See this fiddle

來源

2013-05-18 18:42:37 gustavohenke

不幸的是，我不能走出指定固定寬度的父容器，而第二個方法打破了流文檔以及絕對定位框之後的所有內容都不會直接出現在它後面。 –

對於所涉及的每個元素，將它添加到它的CSS：

'盒大小：邊界盒;'

務必添加供應商前綴。

來源

2013-05-18 19:40:08 Qristhal

將嵌套容器擴展爲頁面寬度

回答

相關問題