Javascript、Jquery获取浏览器和屏幕各种高度宽度

实用的 JavaScript 方案（涵盖所有浏览器）：

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

--------------------------------------------------------

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body)，包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽，包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高，包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

 

Jquery

alert($(window).height());                           //浏览器当前窗口可视区域高度

alert($(document).height());                        //浏览器当前窗口文档的高度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width());                            //浏览器当前窗口可视区域宽度

alert($(document).width());                        //浏览器当前窗口文档对象宽度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

例子：

    //比较body和window窗口的大小，返回相减的数值
    diffBodyHWindowH: function() {
        var mywindow = $(window).height();
        var mybody = $(document.body).height();
        var subheight;
        if (mybody > mywindow) {
            subheight = 0;
        } else {
            subheight = mywindow - mybody;
        }
        return subheight;
    },
    //根据返回的body和window相减的数值设置.ccBox的高度
    setHeight: function() {
        var addH = diffBodyHWindowH();
        if (addH > 0) {
            var $ccBox = $(".ccBox");
            $ccBox.height($ccBox.height() + addH);
        }
    }