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 に追加します。

'box-sizing: border-box;'

必ずベンダー プレフィックスを追加してください。

于 2013-05-18T19:40:08.663 に答える
0

これを行うには 2 つの方法があります。

  1. 幅 100% の要素は の子である必要があり<body>、その中に 960px のコンテナーを再度指定します。このフィドルを参照してください

  2. その 100% 幅の要素を絶対要素として使用します。このフィドルを参照してください

于 2013-05-18T18:42:37.277 に答える