javascript - js - ページ上の使用可能なスペースの幅と高さ

Question

ページの使用可能なスペースの幅と高さを取得することは可能ですか? - 言い換えれば、スクロールバーなしでページに配置できる長方形の最大サイズ。

コンテンツ全体がスクロール可能なjqueryデータテーブルを使用しています-「sScrollY」値を可能な限り最大に設定したいと思います。

Answer 1

よく理解している場合は、次のjsbinを試してください：http：//jsbin.com/exojes/3/edit

Js

$(function() {

    var div = $('div').eq(0),
        de  = document.documentElement;

    div.css({
      width: de['offsetWidth'] + 'px',
      height: de['offsetHeight'] + 'px' 
    });

});

Css

div {
   /* box-sizing is useful if you're using borders or inner paddings */
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   box-sizing: border-box; 

   border: 2px green dotted;
   position: absolute;
   top: 0; left: 0;
}

---

それ以外の場合は、JavaScriptを呼び出さずに、このCSSのみを使用できます

html, body, div {
   height: 100%;
   width: 100%;
}

div {
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   box-sizing: border-box; 
   border: 2px green dotted;
   position: absolute;
   top: 0; left: 0;
}

Answer 2

以下は、ウィンドウの幅と高さを示します

width = $(window).width();
height = $(window).height();

Answer 3

他のコンテンツにラッパーを配置し、次の JavaScript を使用して、ページで使用可能なスペースの量を取得します。

var wHeight = parseFloat(document.getElementById("wrapper").style.height);
var pHeight = $("body").height();
var empty = pHeight - wHeight;

Answer 4

とを取得してwidth使用できますheightbody

var height = $("body").height();
var width = $("body").width();