Hatena::Groupjavascript

JavaScriptで遊ぶよ

 | 

2009-06-12

html,body{height:100%;}

06:27

とある CSS で、このように書かれていた。

html,body{height:100%;}

ページサイズぴったりに表示する方法らしいのだけど、これをやってもページが長くなるとスクロールも出るし、指定しない場合となんら変わらないように見える。

この指定をすると、ブラウザの計算がおかしなことになるので、そういうライブラリや CSS を使う場合や作る場合は、他のスクリプトとの併用に注意。

具体的には、Firefox と Safari と Opera で

getComputedStyle(document.body,null).height
getComputedStyle(document.documentElement,null).height
document.body.offsetHeight
document.documentElement.offsetHeight

が、ページの高さではなくウィンドウの高さを返すようになり、Firefox と Opera では

document.body.scrollHeight

もウィンドウの高さになる。(標準モードしか試してない)

とりあえず上記のブラウザでは

document.documentElement.scrollHeight

を使えばページの高さを取得できる。


↓を見る限りでは、とりあえずページの高さが欲しいなら document.documentElement.scrollHeight を使っときゃ大丈夫ってことらしい。


正しい方法

試したところ、↓これで問題ないっぽい。

var Root = /BackCompat/i.test(document.compatMode) ?
    document.body : document.documentElement;
console.log([
Root.clientHeight,//表示領域の高さ
Root.clientWidth,//表示領域の幅
Root.scrollHeight,//ページ全体の高さ
Root.scrollWidth,//ページ全体の幅
window.pageYOffset || Root.scrollTop,//現在の縦スクロール量
window.pageXOffset || Root.scrollLeft,//現在の横スクロール量
]);
トラックバック - http://javascript.g.hatena.ne.jp/edvakf/20090612
 |