イヨノート

Design, Code and other chaos included.

jsで要素をブラウザ幅いっぱいに表示する

2012.01.06

......ということをやりたい場合の注意点。

ブラウザの (スクロール分を含む) 幅を取得する場合、html内にある別要素の最大幅 (高さ) よりも小さい値が入らない。

return ( document.documentElement.scrollWidth || document.body.scrollWidth );

たとえば、表示中のブラウザのスクロール分を含む幅の値は1000px (リニア) だったとして、html内にそれ以上に大きい2000pxの「固定幅」が指定された要素Aが存在する場合、( document.documentElement.scrollWidth || document.body.scrollWidth ) の値はwindow.onresizeで再計算しても2000pxより小さくならない。

回避策として、要素Aの幅をいったんリセット (0px) し、要素Aの幅に ( document.documentElement.scrollWidth || document.body.scrollWidth ) の値を入れ直す。

htmlのデバッグの仕方についても今後要検討。