jquery.fancybox

遇到一個(gè)很奇怪的問(wèn)題，在使用

http://www.haorooms.com/post/js_jquery_height

http://www.rzrgm.cn/zhuwq585/p/5400986.html

在javascript和jquery中，都有對(duì)各種高度的寫法，在這里，我們就著重講一下窗口、文檔等高度的理解。(寬度和高度差不多！)。

jquery的各種高度

首先來(lái)說(shuō)一說(shuō)$(document)和$(window)，如下：

$(document).height();//整個(gè)網(wǎng)頁(yè)的高度

$(window).height();//瀏覽器可視窗口的高度
$(window).scrollTop();//瀏覽器可視窗口頂端距離網(wǎng)頁(yè)頂端的高度（垂直偏移），用一句話理解就是：當(dāng)網(wǎng)頁(yè)滾動(dòng)條拉到最低端時(shí)，

$(document).height() == $(window).height() + $(window).scrollTop()注意，是拉到最低端！

當(dāng)網(wǎng)頁(yè)高度不足瀏覽器窗口時(shí)$(document).height()返回的是$(window).height()

假如您要獲取整個(gè)網(wǎng)頁(yè)的高度，不建議用$("html").height()、$("body").height()的高度，
原因：
$("body").height()：body可能會(huì)有邊框，獲取的高度會(huì)比$(document).height()小； $("html").height()：在不同的瀏覽器上獲取的高度的意義會(huì)有差異，說(shuō)白了就是瀏覽器不兼容。

說(shuō)道這里，提及邊框和margin還有padding，我們自然想到了jquery的另外的兩個(gè)高度，那就是innerHeight()和outerHeight()
innerHeight()和outerHeight()不適用于window 和 document對(duì)象，對(duì)于window 和 document對(duì)象可以使用.height()代替。innerHeight()和outerHeight()主要用來(lái)獲取標(biāo)簽的高度。

innerHeight:高度＋補(bǔ)白
outerHeight:高度＋補(bǔ)白＋邊框，參數(shù)為true時(shí)：高度＋補(bǔ)白＋邊框＋邊距
innerHeight(value)

這個(gè)“value”參數(shù)可以是一個(gè)字符串（數(shù)字加單位）或者是一個(gè)數(shù)字,如果這個(gè)“value”參數(shù)只提供一個(gè)數(shù)字，jQuery會(huì)自動(dòng)加上像素單位（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ū)挾?br>alert($(document).width()); //瀏覽器當(dāng)前窗口文檔對(duì)象寬度
alert($(document.body).width()); //瀏覽器當(dāng)前窗口文檔body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin

javascript的各種高度

網(wǎng)頁(yè)可見區(qū)域?qū)抂僅針對(duì)body]： document.body.clientWidth
網(wǎng)頁(yè)可見區(qū)域高[僅針對(duì)body]： document.body.clientHeight
網(wǎng)頁(yè)可見區(qū)域?qū)抂僅針對(duì)body]： document.body.offsetWidth (包括滾動(dòng)條和邊框，若滾動(dòng)條和邊框?yàn)?，則和clientWidth相等)
網(wǎng)頁(yè)可見區(qū)域高[僅針對(duì)body]： document.body.offsetHeight (包括滾動(dòng)條和邊框，若滾動(dòng)條和邊框?yàn)?，則和clientHeight相等)
可視窗口寬度(包括滾動(dòng)軸寬度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari
可視窗口高度，不包括瀏覽器頂部工具欄： window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
網(wǎng)頁(yè)正文全文寬(不包括滾動(dòng)軸的寬度)： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高：document.body.scrollHeight
//假如網(wǎng)頁(yè)中沒(méi)有滾動(dòng)軸，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等。
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： 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