3

基本的な CSS をいくつか適用した基本的な 2 列の HTML レイアウトがあります。

html {
  background-color: gray;
}

body {
  width: 900px;
  background-color: white;
  margin: 0 auto;
  overflow: hidden;
}

.logo, .nav, .contact {
  float: left;
  width: 248px;
  border: 1px black solid;
}

.about, .banner, .content {
  float: right;
  width: 648px;
  border: 1px black solid;
}

問題は、<!DOCTYPE html>ページの先頭に宣言を追加すると、属性がタグbackground-colorに対して機能しないことです。bodyこれは、DOCTYPE なしでデフォルトで quirks モードになっていることと関係があると思いますが、無効な CSS である可能性があるのは何ですか? (ジグソーで検証しましたが、エラーや警告は表示されません。)

4

1 に答える 1

5

DOCTYPE が欠落していたため (最初から存在していたはずです)、ページが quirks モードでレンダリングされていました。quirks モードでは、ブラウザーはbody高さをビューポートの高さの 100% まで伸ばすことが知られています。適切な DOCTYPE を持つことによってトリガーされる標準モードではbody、通常のブロック レベル要素のように動作し、デフォルトではコンテンツと同じ高さになります。あなたの場合、これによりbodyの背景色が表示されなくなります。

CSS には本質的に問題はありません。そのため、CSS は検証bodyされますが、標準モードでビューポートの高さまで引き伸ばしたい場合は、次の高さプロパティをそれぞれhtmlおよびに追加する必要があります。body

html {
  height: 100%;
}

body {
  min-height: 100%;
}
于 2012-08-25T22:21:58.070 に答える