首页 　· 　知识　· 　前端
frameset的问题与解决
网友　　CSDN博客　　综合　　编辑:伊丽 　　图片来源:网络
需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关

我自己的页面是下面这样的。

 


 copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">

  3. <headrunat="server">

  4.     <title>欢迎登录 管理后台</title>

  5. </head>

  6. <framesetborder="0"framespacing="0"rows="132,*,38"frameborder="0"cols="*">

  7.     <framename="topframe"marginwidth="0"src="managetop.aspx"mce_src="managetop.aspx"frameborder="0"noresize="noresize"scrolling="no">

  8.     <framesetborder="0"framespacing="0"frameborder="0"cols="188,*">

  9.         <framename="leftframe"src="manageleft.aspx"mce_src="manageleft.aspx"frameborder="0"noresize="noresize">

  10.         <framename="main"src="managemain.htm"mce_src="managemain.htm"frameborder="0">

  12.     </frameset>

  13.     <framename="footframe"src="managefooter.aspx"mce_src="managefooter.aspx"frameborder="0"noresize="noresize"scrolling="no">

  14. </frameset>

  15. </html>

right部份页面managemain.htm代码

[xhtml] view plain copy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">

  4. <head>

  5.     <title> 管理平台</title>

  6.     <linkhref="../css/manageStyle.css"mce_href="css/manageStyle.css"rel="stylesheet"type="text/css"/>

  7. </head>

  8. <bodystyle="OVERFLOW: hidden"mce_style="OVERFLOW: hidden">

  9.     <tablecellpadding="0"cellspacing="0"width="100%"border="0">

  10.         <tbody>

  11.             <tr>

  12.                 <td>

  13.                     <iframename="main"src="indexGuide.aspx"mce_src="indexGuide.aspx"frameborder="0"height="500px"width="100%"></iframe>

  14.                 </td>

  15.             </tr>

  16.         </tbody>

  17.     </table>

  19. </body>

  20. </html>

如果right页的内容不够多的时候。就出现这种情况。



















 经过查找原因。找到解决方案。下面是right部份页面managemain.htm代码中的CSS引用文件

[xhtml] view plain copy

  1. <linkhref="../css/manageStyle.css"mce_href="css/manageStyle.css"rel="stylesheet"type="text/css"/>

在manageStyle.css文档中加入

[css] view plain copy

  1. body {  

  2.     background-color: #d9e9ff;  

  3.     background-image: url(../images/niuu_01.gif);    /*图片size:1336*101*/

  4.     background-repeat: repeat-y;                          /*填充方式*/

  5.     background-position: left;  

  6.     margin:0;height:100%;                                  /*高度设置*/

  7. }  

 问题解决。

---------------------------------------------华不华丽与我无关---------------------------------------------------

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 
 以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

  2. <htmlxmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"lang="gb2312">

  3. <head>

  4. <head>

  5. <title> 代码实例:关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </title>

  6. <metahttp-equiv="content-type"content="text/html; charset=gb2312"/>

  7. <metaname="author"content="枫岩,CnLei.y.l@gmail.com">

  8. <metaname="copyright"content="[url=http://www.cnlei.com]http://www.cnlei.com[/url]"/>

  9. <metaname="description"content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较"/>

  10. <mce:styletype="text/css"media="all"><!--  

  11. body {font-size:14px;}  

  12. a,a:visited {color:#00f;}  

  13. #Div_CnLei {  

  14. width:300px;  

  15. height:200px;  

  16. padding:10px;  

  17. border:10px solid #ccc;  

  18. background:#eee;  

  19. font-size:12px;  

  20. }  

  21. #Div_CnLei p {margin:0;padding:10px;background:#fff;}  

  22. --></mce:style><styletype="text/css"media="all"mce_bogus="1">body {font-size:14px;}  

  23. a,a:visited {color:#00f;}  

  24. #Div_CnLei {  

  25. width:300px;  

  26. height:200px;  

  27. padding:10px;  

  28. border:10px solid #ccc;  

  29. background:#eee;  

  30. font-size:12px;  

  31. }  

  32. #Div_CnLei p {margin:0;padding:10px;background:#fff;}</style>

  33. <mce:scripttype="text/javascript"><!--  

  34. function Obj(s){  

  35. return document.getElementById(s)?document.getElementById(s):s;  

  36. }  

  37. function GetClientWidth(o){  

  38. return Obj(o).clientWidth;  

  39. }  

  40. function GetClientHeight(o){  

  41. return Obj(o).clientHeight;  

  42. }  

  43. function GetOffsetWidth(o){  

  44. return Obj(o).offsetWidth;  

  45. }  

  46. function GetOffsetHeight(o){  

  47. return Obj(o).offsetHeight;  

  48. }  

  49. // --></mce:script>

  50. </head>

  51. <body>

  52. <p>点击下面的链接:</p>

  53. <divid="Div_CnLei">

  54. <p><ahref="http://bbs.chinaunix.net/"mce_href="http://bbs.chinaunix.net/""javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a><ahref="http://bbs.chinaunix.net/"mce_href="http://bbs.chinaunix.net/""javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>

  55. <p><ahref="http://bbs.chinaunix.net/"mce_href="http://bbs.chinaunix.net/""javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a><ahref="http://bbs.chinaunix.net/"mce_href="http://bbs.chinaunix.net/""javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>

  56. </div>

  57. <divid="Description">

  58. <p><strong>IE6.0、FF1.06+:</strong><br/>

  59. clientWidth = width + padding = 300+10×2 = 320<br/>

  60. clientHeight = height + padding = 200+10×2 = 220<br/>

  61. offsetWidth = width + padding + border = 300+10×2+10×2= 340<br/>

  62. offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p>

  63. <p><strong>IE5.0/5.5:</strong><br/>

  64. clientWidth = width - border = 300-10×2 = 280<br/>

  65. clientHeight = height - border = 200-10×2 = 180<br/>

  66. offsetWidth = width = 300<br/>

  67. offsetHeight = height = 200</p>

  68. </div>

  69. </body>

  70. </html>

blob.png

本文作者:网友 来源:CSDN博客
CIO之家 www.ciozj.com 微信公众号:imciow
　　　　>>频道首页　　>>网站首页 　　纠错　　>>投诉
版权声明:CIO之家尊重行业规范，每篇文章都注明有明确的作者和来源；CIO之家的原创文章，请转载时务必注明文章作者和来源；
延伸阅读
也许感兴趣的
我们推荐的
主题最新
看看其它的
上一篇
CSS 连接地址后面加上问号(?)表示什么意思?
下一篇
frameset 的问题与解决
作者其它的文章
收藏至微信