引子
在javascript和jquery中翅帜，都有對各種高度的寫法藕甩，在這里周荐，我們就著重講一下窗口、文檔等高度的理解腋妙。(寬度和高度差不多骤素！)
jquery的各種高度
首先來說一說$(document)和$(window)匙睹，如下：
$(document).height();//整個(gè)網(wǎng)頁的高度
$(window).height();//瀏覽器可視窗口的高度
$(window).scrollTop();//瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度（垂直偏移）
用一句話理解就是：當(dāng)網(wǎng)頁滾動條拉到最低端時(shí)痕檬，
$(document).height() == $(window).height() + $(window).scrollTop()送浊。
注意，是拉到最低端唁桩！
當(dāng)網(wǎng)頁高度不足瀏覽器窗口時(shí)$(document).height()返回的是$(window).height()
假如您要獲取整個(gè)網(wǎng)頁的高度荒澡，不建議用$("html").height()单山、$("body").height()的高度，
原因：
$("body").height()：body可能會有邊框饥侵，獲取的高度會比$(document).height()絮锷膨疏； $("html").height()：在不同的瀏覽器上獲取的高度的意義會有差異钻弄，說白了就是瀏覽器不兼容。
說道這里饲帅，提及邊框和margin還有padding灶泵，我們自然想到了jquery的另外的兩個(gè)高度对途，那就是innerHeight()和outerHeight()
innerHeight()和outerHeight()不適用于window 和 document對象实檀，對于window 和 document對象可以使用.height()代替。innerHeight()和outerHeight()主要用來獲取標(biāo)簽的高度恬吕。
innerHeight()
innerHeight:高度＋補(bǔ)白
outerHeight:高度＋補(bǔ)白＋邊框铐料，參數(shù)為true時(shí)：高度＋補(bǔ)白＋邊框＋邊距
innerHeight(value)
這個(gè)“value”參數(shù)可以是一個(gè)字符串（數(shù)字加單位）或者是一個(gè)數(shù)字,如果這個(gè)“value”參數(shù)只提供一個(gè)數(shù)字余赢，jQuery會自動加上像素單位（px）。如果只提供一個(gè)字符串扛拨，任何有效的CSS尺寸都可以為高度賦值（就像100px, 50%, 或者 auto）绑警。注意在現(xiàn)代瀏覽器中央渣，CSS高度屬性不包含padding, border, 或者 margin， 除非box-sizingCSS屬性被應(yīng)用北启。
jquery高度咕村，放到瀏覽器中試一下
alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度
alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度
alert($(document.body).height()); //瀏覽器當(dāng)前窗口文檔body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?alert($(document).width()); //瀏覽器當(dāng)前窗口文檔對象寬度
alert($(document.body).width()); //瀏覽器當(dāng)前窗口文檔body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
javascript的各種高度
網(wǎng)頁可見區(qū)域?qū)抂僅針對body]： document.body.clientWidth
網(wǎng)頁可見區(qū)域高[僅針對body]： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)抂僅針對body]： document.body.offsetWidth (包括滾動條和邊框懈涛，若滾動條和邊框?yàn)?批钠，則和clientWidth相等)
網(wǎng)頁可見區(qū)域高[僅針對body]： document.body.offsetHeight (包括滾動條和邊框得封，若滾動條和邊框?yàn)?呛每，則和clientHeight相等)
可視窗口寬度(包括滾動軸寬度)：window.innerWidth; //IE9+、Chrome洋腮、Firefox啥供、Opera 以及 Safari
可視窗口高度库糠，不包括瀏覽器頂部工具欄： window.innerHeight;//IE9+瞬欧、Chrome艘虎、Firefox籍滴、Opera 以及 Safari
網(wǎng)頁正文全文寬(不包括滾動軸的寬度)： document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
//假如網(wǎng)頁中沒有滾動軸候生，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等须蜗。
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高（整個(gè)屏幕的高度）： window.screen.height
屏幕分辨率的寬（整個(gè)屏幕的寬度）： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
整個(gè)瀏覽器可用工作區(qū)高度： window.outerHeight
整個(gè)瀏覽器可用工作區(qū)寬度： window.outerWidth
結(jié)束語
注意唠粥，在運(yùn)用jquery的innerHeight()和outerHeight()的時(shí)候晤愧，可能會有瀏覽器的兼容問題，不同瀏覽器出現(xiàn)不同高度蛉腌，總之官份，實(shí)踐得真知，你可以測試一下烙丛，寫幾個(gè)小的demo舅巷，總結(jié)一下！
看完jquery和javascript的height,不知道您有何感想河咽，這篇文章希望對你有幫助钠右，可以留言相互交流，謝謝忘蟹！