1

height の使用に問題があります。ページの div に height:100% を使用しました。そして、その背景色を設定しました。ブラウザが最大化されている間は問題なく動作します。しかし、サイズを変更すると、div が正しくレンダリングされません。

私の問題は、ブラウザー ウィンドウのサイズを変更すると、div のスクロールが表示されますが、div 全体の背景色がレンダリングされないことです。ウィンドウのサイズを変更したときに見た部分だけがレンダリングされます。

私のスタイルクラス 

html,body{height:100%;} 
.rightDiv{  height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}

この問題から抜け出すのを手伝ってください。

前もって感謝します。

4

2 に答える 2

1

ローカルのhtmlファイルを使用してこれをテストしました：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body{height:100%;} 
      .rightDiv{height:100%;width: 39%;background: #3F5D91;float: right;color: #F0F0F0;}
    </style>
  </head>
  <body>
    <div class="rightDiv">Hello</div>
  </body>
</html>

Firefox 18.0.2 / Windows7では、右側にdivが青色で表示され、フルスクリーンまたはサイズ変更するとスクロールバーが表示されます。

スクロールすると、背景色がそのままの状態でdivの残りの部分が表示されるため、なぜそれが表示されるのか説明できません。

しかし、実際にスクロールバーを見たいのではないかと思います。要素を100％に設定するということは、通常、要素がこぼれるのではなく、ビューポートを埋めるだけであることを意味します。
この場合、ブラウザがdivを含む要素（本文など）に適用するデフォルトのマージンを削除する必要があります。設定：

 html,body{margin:0; height:100%;}

divが適切にフィットするようになります。

ちなみに、CodePenやJSFiddleのようなサイトでは、 NormalizeやResetのようなリセットスタイルシートを適用するオプションが提供されており、新しいペン/フィドルを作成するときにこれらが事前に選択されていることに注意する必要があります（JSFiddleはNormalizeに対してこれを行います）。

于 2013-02-11T14:22:14.007 に答える
0

私はそのような問題を抱えていました。ここで私を助けたのは1つだけです。body 要素の高さを 100% にする必要があるときは、次のスタイルを設定する必要がありました。

body {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  -webkit-background-size: cover; /*makes background cover whole page
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

同様のものを他の要素に含めることができます。

于 2013-02-11T08:21:37.523 に答える