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

您可以获取width的{{1}}和height并使用它

body

Answer 4

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

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

js - 页面上可用空间的宽度和高度

4 个答案: