基于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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
javascript移动端 电子书 翻页效果实现代码
Sep 07 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript常用本地对象小结
2016/03/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
原生JS封装animate运动框架的实例
2017/10/12 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
django如何通过类视图使用装饰器
2019/07/24 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
体现团队精神的口号
2014/06/06 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
小学生交通安全寄语
2015/02/27 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2016情人节宣传语
2015/07/14 职场文书
军训结束新闻稿
2015/07/17 职场文书
运动会5000米加油稿
2015/07/21 职场文书