浏览器的窗口高度

html-css021

浏览器的窗口高度,第1张

window高度应当是文档所在窗口的可视高度(没有包括浏览器的滚动条),计算方法document.documentElement.clientHeight

document高度应该为文档内容的高度,计算方法Math.max(document.body[ "scrollHeight" ], document.documentElement[ "scrollHeight"])

html高度应当为html元素的高度(包括边框滚动条),计算方法htmlElement.offsetHeight

body高度是body元素的高度(包括边框滚动条),计算方法bodyElements.offsetHeight

$(window).scrollTop()和$(document).scrollTop()具有相同的效果,都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。

$(document)是获取文档对象 

$(window)是获取窗口对象

$('body,html')获取的是文件本身

$(window).scroll和$(window).scrollTop()为0的问题

问题1:$(window).scroll无效问题

如果你的css中:html,body的高度样式如果设置为100%,那么$(window).scroll方法将检测不到正确的滚出高度(0),导致滚动监听事件失效。

解决方法:

设置html,body{height:auto}可以解决。

问题2:$(window).scrollTop()获取值一直为0--------------兼容性问题

是兼容各种浏览器的写法,分别为获取当前的scrollTop和设置scrollTop:

 function getScrollTop() {                               var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop 

return scrollTop 

}  

function setScrollTop(scroll_top) {  

document.documentElement.scrollTop = scroll_top

 window.pageYOffset = scroll_top  

 document.body.scrollTop = scroll_top  

 }  

screen是设备的屏幕对象,理论上,当一个设备固定之后,那么这个设备的屏幕的可视宽度和高度也是固定的

window.innerWidth,window.innerHeight,document.documentElement.clientWidth,document.documentElement.clientHeight这几个属性,是取的浏览器内部的可视宽高(移动设备下为移动设备可视区域的宽高减去手机状态栏、浏览器控制栏),即浏览器一屏的宽高。

document.body.clientWidth、document.body.clientHeight。有滚动条情况下,包含滚动内容的高度。

document.body返回出来的是html 中 body 节点;document.documentElement返回的是 html 根节点。

<!DOCTYPE>模式下,如果不设置html,body{height:100%}且出现滚动条的情况下,

document.documentElement.clientHeight与document.body.clientHeight的值一般是不同的

document.body.clientWidth =>BODY对象宽度

document.body.clientHeight =>BODY对象高度

document.documentElement.clientWidth =>可见区域宽度

document.documentElement.clientHeight =>可见区域高度

设置html,body{height:100%}后,document.body.clientHeight与document.documentElement.clientHeight值相同,为document.documentElement.clientHeight的值。

浏览器相对于显示屏的位置,即document 在screen的某个位置

除了 Internet Explorer外,所有主要浏览器都支持screenX和screenY属性。

注意: IE浏览器使用。 "window.screenLeft" 和 "window.screenTop"获得相同的值

在html中设置浏览器的大小,实现的方式比较多,不过就html而言还是比较难实现的,一般的有JS,JQ来动态的去控制,不过用于网页布局的最好还是使用css来控制是最好,需要理解浏览器的大小,其实就是控制内容区域,也就是body区域,然后在获取到body在css中书写好width和height,具体看下代码:

<html>

<head>

body{

width:960px

height:1000px

}

</head>

<body>

<div id='div1'>

<p>测试文字。</p>

</div>

</body>

</html>