如何获取页面的高度和宽度

strInfo+=\r\n网页可见区域高:+documentbodyclientHeight;strInfo+=\r\n网页可见区域宽:+documentbodyoffsetWidth+(包括边线的宽);strInfo+=\r\n网页可见区域高:+documentbodyoffsetHeight+(包括边线的高);strInfo+=\r\n网页正文全文宽:+documentbodyscrollWidth;strInfo+=\r\n网页正文全文高:+documentbodyscrollHeight;strInfo+=\r\n网页被卷去的高:+documentbodyscrollTop;strInfo+=\r\n网页被卷去的左:+documentbodyscrollLeft;strInfo+=\r\n网页正文部分上:+windowscreenTop;strInfo+=\r\n网页正文部分左:+windowscreenLeft;strInfo+=\r\n屏幕分辨率的高:+windowscreenheight;strInfo+=\r\n屏幕分辨率的宽:+windowscreenwidth;strInfo+=\r\n屏幕可用工作区高度:+windowscreenavailHeight;strInfo+=\r\n屏幕可用工作区宽度:+windowscreenavailWidth;windowconfirm(strInfo);</script-----------------------------------------------------------------------------------------最近编程中发现html静态页面的开发可以使用documentbodyClientHeight来获得页面的高度，但aspnet的页面却无法这样获取，获取到的只是页面最小的高度，比如页面只有一个button，那么该js语句获得的就是24。documentdocumentElementOffsetHeight----------------------------------------------------------------------------------------加上documentbodyscrollLeft;documentbodyscrollTop;x=documentbodyclientWidth+documentbodyscrollLeft;y=documentbodyclientHeight+documentbodyscrollTop;若想得到整个页面的高度可以用

IE中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

FireFox中： 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

Opera中： 

documentbodyclientWidth ==> 可见区域宽度 

documentbodyclientHeight ==> 可见区域高度 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

没有定义W3C的标准，则 

IE为： 

documentdocumentElementclientWidth ==> 0 

documentdocumentElementclientHeight ==> 0 

FireFox为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

Opera为： 

documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 

documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

网页可见区域宽： documentbodyclientWidth 

网页可见区域高： documentbodyclientHeight 

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽) 

网页可见区域高： documentbodyoffsetHeight (包括边线的高) 

网页正文全文宽： documentbodyscrollWidth 

网页正文全文高： documentbodyscrollHeight 

网页被卷去的高： documentbodyscrollTop 

网页被卷去的左： documentbodyscrollLeft 

网页正文部分上： windowscreenTop 

网页正文部分左： windowscreenLeft 

屏幕分辨率的高： windowscreenheight 

屏幕分辨率的宽： windowscreenwidth 

屏幕可用工作区高度： windowscreenavailHeight 

屏幕可用工作区宽度： windowscreenavailWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标 

eventclientY 相对文档的垂直座标 

eventoffsetX 相对容器的水平坐标 

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值 

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例：

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数：获取尺寸 

{ 

    //获取窗口宽度 

    if (windowinnerWidth) 

        winWidth = windowinnerWidth; 

    else if ((documentbody) && (documentbodyclientWidth)) 

        winWidth = documentbodyclientWidth; 

    //获取窗口高度 

    if (windowinnerHeight) 

        winHeight = windowinnerHeight; 

    else if ((documentbody) && (documentbodyclientHeight)) 

        winHeight = documentbodyclientHeight; 

    //通过深入Document内部对body进行检测，获取窗口大小 

    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 

    { 

        winHeight = documentdocumentElementclientHeight; 

        winWidth = documentdocumentElementclientWidth; 

    } 

    //结果输出至两个文本框 

    documentform1availHeightvalue= winHeight; 

    documentform1availWidthvalue= winWidth; 

} 

findDimensions(); 

//调用函数，获取数值 

windowonresize=findDimensions;

jquery

$(function(){

/调整窗口自动调整宽度/

$(window)resize(function(){

var h = $(window)height();

var w = $(window)width();

consoleinfo("窗口高度：" + h + "; 窗口宽度：" + w);

});

});

$(window)是jquery 对象， 加height()  也是就是获取窗口高度

同理，如果你想获取某个div的高度可以使用

var divHeight = $("div")height();

/或者/

var divHeight = $("div")[0]offsetHeight;

$("div")是jquery对象，$("div")[0] 或者 $("div")get(0)是dom对象

但是在开发中会有很多坑  这点你得注意

如果 当前的 元素是 隐藏状态 display ： none

那你是无法通过上述方法和获取宽高的  ，所以在开发中如果没有获取到宽高，就要留意上面的代码在执行的时候 该元素是不是在隐藏状态

如果你想把 屏幕的高度 赋值给div

$("div")height(winHeight)

// 或者

$("div")[0]offsetHeight = winHeight

alert($(window)height()); //浏览器时下窗口可视区域高度

alert($(document)height()); //浏览器时下窗口文档的高度

alert($(documentbody)height());//浏览器时下窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器时下窗口可视区域宽度

alert($(document)width());//浏览器时下窗口文档对于象宽度

alert($(documentbody)width());//浏览器时下窗口文档body的高度

alert($(documentbody)outerWidth(true));

在 xaml 档:

<Window x:Name="Window" >

<StackPanel x:Name="layoutRoot">

<TextBlock Text="Width:"/>

<TextBlock Text="{Binding ElementName=Window,Path=ActualWidth}"/>

<TextBlock Text="Height:"/>

<TextBlock Text="{Binding ElementName=Window,Path=ActualHeight}"/>

</StackPanel>

</Window>

在 code (C#) 中 (assuming the following method is a member of the Window Class):

void TellMeWidthAndHeight()

{

MessageBoxShow(thisActualWidthToString());

MessageBoxShow(thisActualHeightToString());

}

//js部分

$(document)ready(function() {

$("#button")click(function() {

alert("高："+$(document)height()+" 宽："+$(document)width());

});

});<!-- html 部分 -->

<button id="button">点击显示</button>

你真确定不好使？检查一下jquery路径吧。

以上就是关于如何获取页面的高度和宽度全部的内容，包括:如何获取页面的高度和宽度、如何用JS动态获取浏览器的宽高、js或者jquery如何实时获取浏览器的高度和宽度的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！