基于jQuery实现左右div自适应高度完全相同的代码


Posted in Javascript onAugust 09, 2012

在线演示:http://demo.3water.com/js/2012/jquery_demo/jquery_div_autoheihet.htm
完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery实现左右div自适应高度完全相同 - 三水点靠木</title> 
<meta name="Copyright" content="脚本分享网 https://3water.com/" /> 
<meta name="description" content="jQuery实现左右div自适应高度完全相同" /> 
<meta content="jQuery实现左右div自适应高度完全相同,JavaScript,分享,JavaScript代码" name="keywords" /> 
<style type="text/css"> 
<!-- 
body{FONT-SIZE: 14px;background-color:#fff} 
--> 
</style> 
<style type="text/css"> 
#left{background:#999999; float:left; width:100px;} 
#right{background:#0066FF; color:#fff; width:300px; float:left;} 
.clear{clear:both;} 
</style> 
</head> 
<body> 
<h3>右边高度高度左边</h3> 
<div id="left"> 
<div style="padding:10px"> 
<a href="https://3water.com">三水点靠木</a> 
</div> 
</div> 
<div id="right"> 
<div style="padding:10px"> 
是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="https://3water.com/">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的 
</div> 
</div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function $(id){ 
return document.getElementById(id) 
} 
function getHeight() { 
if ($("left").offsetHeight>=$("right").offsetHeight){ 
$("right").style.height=$("left").offsetHeight + "px"; 
} 
else{ 
$("left").style.height=$("right").offsetHeight + "px"; 
} 
} 
window.onload = function() { 
getHeight(); 
} </script> 
<div style="clear:both"></div> 
</body> 
</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

ps:介绍摘自百度百科

Javascript 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 #Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 #Javascript
基于jQuery的简单九宫格实现代码
Aug 09 #Javascript
JavaScript基础知识之数据类型
Aug 06 #Javascript
jquery 插件学习(六)
Aug 06 #Javascript
jquery 插件学习(五)
Aug 06 #Javascript
jquery 插件学习(四)
Aug 06 #Javascript
You might like
php 远程关机操作的代码
2008/12/05 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php+mysql实现无限级分类
2015/11/11 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
简单的JS多重继承示例
2008/03/13 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python实现合并字典的方法
2015/07/07 Python
Python解析最简单的验证码
2016/01/07 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python数据结构之翻转链表
2017/02/25 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python time()的实例用法
2020/11/03 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
元旦晚会邀请函
2014/01/27 职场文书
心理学专业求职信
2014/06/16 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
党员个人年度总结
2015/02/14 职场文书
学校党支部承诺书
2015/04/30 职场文书