美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

jQuery左右div自适应高度相同的方法

Jquery mihoweb 2660℃ 4评论

大家在有时的网页设计中,前端会出现这样一个问题,因为左侧的侧边导航只有几个链接,很短,而右边的正文部分有可能会很长,怎么才能让左侧的背景能一直随着右侧的内容高度的增加而增加呢?当然,这种解决方法有两种,一种就是让左侧的导航漂浮,在右侧下拉或者是窗口拉出了左侧的高度时置顶,像糗事百科右侧的广告那样,这种方法现在也很流行,不过,我们今天不讲这种,讲的是另一种方法,让左右两边的div的高度能一致,随时一致,如果内容是固定的话,好做,左右固定高度,如果右侧的内容不固定呢?还是有办法得!

这种问题大多都是软件系统或者是一些后台中常用的,方法很简单,利用jquery获取右侧的高度,使得左侧和右侧的高度保持一致就OK啦!废话不多,上代码:

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>    
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>    
  3. <head>    
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />    
  5. <title>jQuery实现左右div自适应高度完全相同</title>    
  6. <style type=“text/css”>    
  7. <!– 
  8. body{FONT-SIZE: 14px;background-color:#fff}   
  9. –>    
  10. </style>    
  11. <style type=“text/css”>    
  12. #left{background:#999999; float:left; width:100px;}    
  13. #right{background:#0066FF; color:#fff; width:300px; float:left;}    
  14. .clear{clear:both;}    
  15. </style>    
  16. </head>    
  17. <body>    
  18. <h3>右边高度高度左边</h3>    
  19. <div id=“left”>    
  20. <div style=“padding:10px”>    
  21. 美浩工作室<br/>  
  22. 美浩工作室<br/>  
  23. 美浩工作室<br/>  
  24. 美浩工作室<br/>  
  25. 美浩工作室<br/>  
  26. </div>    
  27. </div>    
  28. <div id=“right”>    
  29. <div style=“padding:10px”>    
  30. 网站建设工作室<br/>  
  31. 网站建设工作室<br/>  
  32. 网站建设工作室<br/>  
  33. 网站建设工作室<br/>  
  34. 网站建设工作室<br/>  
  35. 网站建设工作室<br/>  
  36. 网站建设工作室<br/>  
  37. 网站建设工作室<br/>  
  38. 网站建设工作室<br/>  
  39. 网站建设工作室<br/>  
  40. 网站建设工作室<br/>  
  41. 网站建设工作室<br/>  
  42. 网站建设工作室<br/>  
  43. 网站建设工作室<br/>  
  44.   
  45. <br />  
  46. <br />  
  47. <br />  
  48. <br />  
  49. <br />  
  50. <br />  
  51. <br />  
  52. <br />  
  53. <br />  
  54. <br />  
  55. <br />  
  56. <br />  
  57. <br />  
  58. 画法几何大家看法   
  59. </div>    
  60. </div>    
  61. <script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>    
  62. <script type=“text/javascript”>    
  63. function $(id){    
  64. return document.getElementById(id)    
  65. }    
  66. function getHeight() {    
  67. if ($(“left”).offsetHeight>=$(“right”).offsetHeight){    
  68. $(“right”).style.height=$(“left”).offsetHeight + ”px”;    
  69. }    
  70. else{    
  71. $(“left”).style.height=$(“right”).offsetHeight + ”px”;    
  72. }    
  73. }    
  74. window.onload = function() {    
  75. getHeight();    
  76. }    
  77.   
  78. </script>    
  79. <div style=“clear:both”></div>    
  80. </body>    
  81. </html>   

这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。
关系公式:scrollHeight = offsetHeight+ scrollTop

上面的方法大家明白了吗?赶紧复制下来运行下,看看效果吧!!!!大家在用的时候给自己要同样高度的两个div加上id,在jquery里面调用的标识修改即可!很方便的,那个jquery.min.js大家可以任意下载,哪里都有的!

如果您喜欢这篇文章,欢迎分享订阅。

转载请注明:美浩工作室官方博客 » jQuery左右div自适应高度相同的方法

喜欢 (20)