6

誰かが助けてくれることを願っています。body height プロパティを 100% に設定しました。これは、すべてのコンテンツが一度に画面に表示される場合に問題ありません。ただし、スクロールする必要がある場合 (ウィンドウを最小化する場合)、ボディの色が消え、HTML の背景に設定した色だけが残ります。誰かが解決策を知っていますか?

html {
  background-color: #07ade0;
}

body {
  background-color: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  font: 20px verdana, "sans serif", tahoma;
}
4

3 に答える 3

17

body が に設定されている場合height: 100%、ウィンドウの 100% になります。これは、長いページの背景が切り取られるため、理想的ではありません。高さのプロパティを削除すると、設定する必要があります。

height: 100%両方を設定してhtml, bodyから、 内にコンテナを作成することもできますbody。次に、htmlスタイルを に移動し、スタイルをbody新しいbodyコンテナに移動します。

要素にピクセル幅を設定することは一般的にベスト プラクティスとは見なされないため、これが推奨されますbody。

HTML

<body>
  <div id="container">Your well-endowed content goes here.</div>
</body>

CSS

html, body {
  height: 100%;
}
body {
  background: #07ade0;
}
#container {
  background: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;   
  font: 20px verdana, "sans serif", tahoma;
  overflow: hidden;
}

デモを参照してください。

于 2013-02-19T17:13:34.253 に答える
5

body 要素に変更heightしてみてください。min-heightこれにより、コンテンツが短すぎて全体を埋めることができない場合は body 要素が 100% になり、コンテンツがブラウザーよりも大きい場合は大きくなります。

于 2013-02-19T17:41:32.437 に答える