今天在开发的时候HTML页面时页面能自动调整大小,但改成JSP后页面大小无法自动调整大小。后来经过调试确定问题区域后,又上网查资料解决了这个问题,下面分割线是网上转载的资料,仅供参考学习.
------------------------------------转自http://www.cnblogs.com/ConjurerYang/---------------------------------------
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别
这个问题是我在整合新的美工页面的时候发现的,在整合页面的时候菜单页面始终显示不出来。但是查看源代码,里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试,发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0,所以菜单才显示不出来。
而取得bodyHeight 高度的语句是 var bodyHeight = document.documentElement.clientHeight;
于是在网上查找相关的资料,结合美工页面和程序的页面对比。
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
程序页面里面少了一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我在ie下做了一下测试,下面是测试代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 <html xmlns=”http://www.w3.org/1999/xhtml”>
2 <head>
3 <title> New Document </title>
4 <script language="JavaScript">
5 <!--
6 function a(){
7 document.getElementById("bodyheight").innerText = document.body.clientHeight;
8 document.getElementById("documentheight").innerText = document.documentElement.clientHeight;
9 }
10 //-->
11 </script>
12 </head>
13
14 <body>
15 <p>
16 <a href="javascript:a()">click here</a>
17 <br/>
18 document.body.clientHeight = <span id="bodyheight"></span> px
19 <br/>
20 document.documentElement.clientHeight = <span id="documentheight"></span> px
21 </p>
22 </body>
23 </html>
测试结果:
当页面上有DOCTYPE的时候,值为
document.body.clientHeight = 54px
document.documentElement.clientHeight = 729px
当没有DOCTYPE时
document.body.clientHeight = 729px
document.documentElement.clientHeight = 0px
可以看出,document.body.clientHeight 和 document.documentElement.clientHeight 的区别。
就是因为少了DOCTYPE 所以 document.documentElement.clientHeight 的值为0。而换成 document.body.clientHeight就好了。
为什么少了DOCTYPE,document.documentElement.clientHeight会为0呢?
这是W3C标准的支持。在网上查到一篇文章那位作者有详细的解释 http://hi.baidu.com/bluedream_119/blog/item/dc377d4bef83aff783025c68.html
2、关于tomcat服务器的路径大小写问题
在整合美工页面的过程中,由于美工在引用js和css样式的时候路径时而大写,时而小写。在windows用ie直接打开都能浏览,页面显示正常。
但是当我整合到项目里面以后,架设到tomcat中的时候,页面样式全部消失。找了半天原因未果,一个同事说是不是因为路径大小写的原因,一试,果然。
记下,以后注意路径的大小写问题。貌似tomcat,websphere都对路径的大小写验证蛮严格的。
分享到:
相关推荐
- **document.body.clientHeight**: 表示网页可见区域的高度(不包含滚动条)。 - **document.body.offsetWidth**: 包含边框在内的网页可见区域宽度。 - **document.body.offsetHeight**: 包含边框在内的网页可见...
这两种模式会影响到document.documentElement和document.body的clientHeight等属性值。 在没有使用DTD声明(文档类型定义)的情况下,浏览器会进入怪异模式。在这个模式下,document.documentElement的clientHeight...
它通过比较 `document.body.clientHeight` 和 `document.documentElement.clientHeight` 来决定返回哪个值。在某些情况下,这两个属性的值可能会有所不同,所以需要进行比较选择最小或最大的值。 ```javascript ...
此函数返回`document.body.scrollHeight`和`document.documentElement.scrollHeight`中的较大值作为文档的总高度。 #### 五、不同浏览器下的表现差异 不同浏览器对`clientWidth`、`clientHeight`等属性的支持有所...
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取可视区域的宽度和高度,不包括滚动条和边框。 2. **`document.body.offsetWidth`** 和 **`document.body....
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n"; // ... return s; } ``` 这个函数可以获取浏览器的宽度和高度,并将其显示在页面上。 获取当前页面的可视高度和宽度...
在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...
- 与IE类似,`document.body.clientWidth`和`document.body.clientHeight`分别获取`body`的宽度和高度。 - 同样,`document.documentElement.clientWidth`和`document.documentElement.clientHeight`获取整个文档...
1. `document.body.clientWidth` 和 `document.body.clientHeight` 也分别返回BODY元素的宽度和高度,与IE相同。 2. 不同的是,`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`...
- `document.body.clientWidth` 和 `document.body.clientHeight` 同样返回BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是包含边距的页面...
- **`document.body.clientWidth`** 和 **`document.body.clientHeight`**:这两个属性分别表示文档体的宽度和高度,不包含边框和滚动条。 - **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**...
winH = document.body.clientHeight; } // for small pages with total size less then the viewport var pageW = (scrW) ? winW : scrW; var pageH = (scrH) ? winH : scrH; return {PageW:pageW, ...
但需要注意的是,对于IE5.5及更高版本,需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`,以及`document.body.scrollTop`和`document.documentElement.scrollTop`,以确保在所有...
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document....
小球在桌面上自由移动,要清楚的几个问题 1、小球在桌面移动的最大距离是多少 2、小球移动的步长是多少 3、当小球碰到屏幕边缘时怎么实现...高:document.documentElement.clientHeight || document.body.clientHeight;
在处理滚动事件时,可能需要获取视口的高度,这可以通过`window.innerHeight`、`document.documentElement.clientHeight`或`document.body.clientHeight`来获取。这些属性提供了不同浏览器下的兼容性: ```...
首先,我们有两个基本属性可以用来获取页面的宽度和高度:`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `<body>` 元素的宽度和高度,不包括滚动条。在 IE、Firefox 和 Opera ...
在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,... 比如:原来document.body.clientHeight,就要改成document.documentElement.scrollTop 为了自适应,可以改了下代码: ((docum