DOCTYPE宣言するとheight:100%が期待通りの動作をしない
この記事、実はPingendoで作ったページに自前で機能を追加していった際に起こった現象なのです。
で、html側のソースに
<!DOCTYPE html>
がなかったのでなんとなく追加。
すると、height:100%;なdiv(bodyの子要素)がviewportの縦全体に表示されなくなった。
- html
- body
- div (height: 100%) ← ここ
- なんちゃら
- かんちゃら
- body
ほえー。記述の通り
html,
body {
height :100%;
}
を指定してあげると期待通りの画面縦いっぱいに表示してくれた。
(html5の)DOCTYPE宣言のはたらき
<!DOCTYPE html>
すると
- ブラウザのレイアウトエンジンが利用するモードを完全準拠モードにする
モード3つ
- 後方互換(Quirks)モード
- レイアウトは、古いブラウザのような非標準の動作をエミュレート
- 完全標準(Full Standards)モード
- HTMLやCSSの仕様書で書かれてる通り動作する
- ほぼ標準(Almost Standards)モード
違いの詳細とか -> 互換モード
てことは後方互換モードにおいて、jQueryが一部期待した動作をしないことがあるのかな。
後方互換モードを想定してるソースに対しては、無理にDOCTYPE宣言追加しないほうがいいのかも(推測)
いままではー
とりあえずDOCTYPE宣言しとこう！で書いてたけど。
これの有無で動作が変わってしまうこと多々ありそうで、意識しといたほうがいいなーっておもいました。
