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

你可以得到widthand heightofbody并使用它

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

Answer 4

在其他内容上放置一个包装器，并使用以下 JavaScript 来获取页面上的可用空间量。

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