1

この単純なマークアップを考えてみましょう。

<body>
 <div style="border: 2px solid navy; position:absolute; width:100%; height:100%">
 </div>
</body>

私がテストしたブラウザ（FirefoxとChrome）では、境界線の右側と下部は表示されていないため、ウィンドウ領域の外側にあるように見えます。マークアップまたはスタイルシートを修正して、divが使用可能な領域全体を占める間（つまり、そのサイズが100％/ 100％または同等）にdivの境界が完全に表示されるようにするにはどうすればよいですか？

4

1 に答える 1

3

境界線は要素の幅の外側にあるため、体の幅が100％の場合、境界線はその外側になり、表示されなくなります。ボックスモデルを見てください：

代替テキストhttp://www.codeweblog.com/upload/b/basic-knowledge-of-css.png

ページの境界線を設定するには、幅と高さを定義しないでください。

body
{
  border: 2px solid navy;
}

別の方法は、偽の境界線を作成し、HTMLの背景色を境界線の色に設定し、パディングを追加してから、本文を通常のページの背景色に設定することです。

html
{
  background-color: navy;
  padding: 2px;
}
body
{
  background-color: #fff;
}

divまたは、 ：を使用してこれを実現したい場合

<body>
  <div class="containerDiv">
    <div class="theDiv">
      Content here.
    </div>
  </div>
</body>

...

div.containerDiv
{
  background-color: navy;
  padding: 2px;
}
div.theDiv
{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
于 2009-08-30T06:08:51.420 に答える