0

この簡単なページを見てください：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <style type="text/css">
      body {padding:20px;}
      #outer {background-color:#ff0000;}
      #inner {width:500px; border:1px solid #0000ff;}   
   </style>
</head>
<body>
   <div id="outer">
      <div id="inner">
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
      </div>
   </div>
</body>
</html>

ブラウザ ページが の幅以下に縮小された場合<div id="inner">(つまり500px、この例では)、ブラウザ ページを右にスクロールすると、内側の div の右側に赤い背景がなくなっていることがわかります。

ここに画像の説明を入力

outer <div>の背景を修正して、幅より下に縮小しないようにする方法を知っていますかinner <div>??? （outer div背景をブラウザの幅全体に拡大する必要があるため、背景を設定することはできませwidth:500px;ん）。

編集:言い換えれば、外側の div の赤い背景色が内側の div の合計 500 ピクセルの幅を埋め、ブラウザーのサイズに縮小しないようにして、内側の div の右側に赤い背景を残さないようにしたいと考えています。これを行うには、外側の div を単純に 500px に設定することはできません。ブラウザを展開すると、赤い背景色も展開する必要があるためです。

4

3 に答える 3

2

これをcssに追加します

#outer {background-color:#ff0000; min-width: 500px;}
于 2012-04-04T16:20:22.713 に答える
1

これは、内側divが外側のdivからオーバーフローしていて、拡張されていないためです。overflow: hiddenアウターに追加するdivと、インナーのあふれる部分を隠すことで、これが起こらないようにしますdiv。

ここでその動作のデモを見ることができます：http：//jsfiddle.net/p6BQg/

CSSオーバーフロープロパティの詳細については、http ：//www.w3schools.com/cssref/pr_pos_overflow.aspをご覧ください。

編集：内側のdivの背景色を維持するには、次の例を参照してください：http: //jsfiddle.net/p6BQg/1/

于 2012-04-04T16:04:24.833 に答える
-1

body { padding: 20px }

あなたが見る問題を引き起こしています。それを削除すると、「縮小」と呼ばれるのを防ぐことができます。

例: http://jsfiddle.net/MvJTa/

于 2012-04-04T15:58:53.957 に答える