上一篇
下一篇
如何使层垂直居中于浏览器窗口
日期:2009-05-26作者:admin
今天在做题库替换试题页面的时候，需要实现一个功能，就是在点击试题列表页里的替换按钮时，
弹出一个窗口，这个窗口要垂直居中，开始想用单纯的CSS实现，但是那样做的结果是，一个满屏且固定高
度的话没问题，试题很多的时候，如果出现滚动条，就只能用JS实现了，因为我这里弹出窗口宽度是固定的，所以只要考虑高度的问题：
定义层到上边的距离v_top然后用窗口的可视距离(document.body.clientHeight)减去层的可视距离除以2，这是在没有滚动条的情况下，怎么计算被菜单栏覆盖的那部分呢？想到了scrollTop。
Example Source Code
注意：开始用的是 document.body.scrollTop;但是返回值一直是0，于是到网上查找解决办法，有一个办法是去掉头部文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，
返回值正常了，但是这样做的后果是页面在IE7下不居中，DTDs 定义了标准文档的类型，删去它页面出问题一点也不奇怪，所以这不能算是解决问题的方法。
原来HTML里是document.body，XHTML里是document.documentElement都指的是<body>节点(OR元素)，也就是说在HTML4.0标准下用document.body，在XHTML标准下就要换成document.documentElement。XHTML下
document.body仅仅表示body对象，而不能代表文档内容所渲染的整个表面。HTML下
document.body.clientHeight表示浏览器的可视高度，XHTML下则是
document.documentElement.clientHeight。document.body.clientHeight在XHTML下仅表示body的可视高度。在HTML4.0下用document.body.scrollTop；而在XHTML下则是document.documentElement.scrollTop,之前的document.body.scrollTop是恒为0的。
弹出一个窗口，这个窗口要垂直居中，开始想用单纯的CSS实现，但是那样做的结果是，一个满屏且固定高
度的话没问题，试题很多的时候，如果出现滚动条，就只能用JS实现了，因为我这里弹出窗口宽度是固定的，所以只要考虑高度的问题：
定义层到上边的距离v_top然后用窗口的可视距离(document.body.clientHeight)减去层的可视距离除以2，这是在没有滚动条的情况下，怎么计算被菜单栏覆盖的那部分呢？想到了scrollTop。
Example Source Code var v_top=(document.body.clientHeight-mesW.clientHeight)/2;
v_top+=document.documentElement.scrollTop;
alert(document.documentElement.scrollTop);
v_top+=document.documentElement.scrollTop;
alert(document.documentElement.scrollTop);
注意：开始用的是 document.body.scrollTop;但是返回值一直是0，于是到网上查找解决办法，有一个办法是去掉头部文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，
返回值正常了，但是这样做的后果是页面在IE7下不居中，DTDs 定义了标准文档的类型，删去它页面出问题一点也不奇怪，所以这不能算是解决问题的方法。
原来HTML里是document.body，XHTML里是document.documentElement都指的是<body>节点(OR元素)，也就是说在HTML4.0标准下用document.body，在XHTML标准下就要换成document.documentElement。XHTML下
document.body仅仅表示body对象，而不能代表文档内容所渲染的整个表面。HTML下
document.body.clientHeight表示浏览器的可视高度，XHTML下则是
document.documentElement.clientHeight。document.body.clientHeight在XHTML下仅表示body的可视高度。在HTML4.0下用document.body.scrollTop；而在XHTML下则是document.documentElement.scrollTop,之前的document.body.scrollTop是恒为0的。
[本日志由 admin 于 2009-06-01 05:09 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: documentElementscrollTop层垂直居
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: documentElementscrollTop层垂直居相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论