サイズを取得する時に考慮すべき箇所は以下の通りになります。スクロール可能な要素にはスクロールバーが表示されますが、表示箇所は padding に重なる形になります。
また、デフォルトだとブラウザごとに width / height を取得する時の値が異なるので、box-sizing: border-box を指定していることを前提とします。
border-box は、 padding と border-width を要素内に収めます。
jQuery を使用する場合
| メソッド | 取得対象 |
| width() | CSSで指定した要素の width – padding-right – padding-left – 左右の border-width |
| height() | CSSで指定した要素の height – padding-top – padding-bottom – 上下の border-width |
| innerWidth() | width() + padding-right + padding-left |
| innerHeight() | width() + padding-top + padding-bottom |
| outerWidth() | innerWidth() + 左右の border-width |
| outerHeight() | innerHeight() + 上下の border-width |
| outerWidth(true) | outerWidth() + margin-right + margin-left |
| outerHeight(true) | outerHeight() + margin-top + margin-bottom |
要素内がスクロール可能になっている場合
スクロール領域を含めた width / height を取得するにはネイティブの scrollWidth / scrollHeight プロパティを使用します。基本的には、「スクロール領域の要素 + padding」の値となるのですが、注意点としてスクロール領域内だと padding-right が効かなくなることと、 ブラウザによって padding-bottom が多少削られてしまうことです。しかも削られる値もブラウザごとに異なるので、scrollHeight の値はブラウザによって取得する値が異なってきます。プログラムで実装するときには注意しましょう。
| プロパティ | 取得対象 |
| scrollWidth | スクロール内の要素のwidth + padding-left |
| scrollHeight | スクロール内の要素のheight + padding-top + padding-bottom – padding-bottomの削られる値 |
サンプルコードを載せておきます。異なるブラウザで実行してみてください。scrollHeight の値だけ違うはずです。