基于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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js获取json元素数量的方法
Jan 27 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP实现的策略模式示例
2019/03/20 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python装饰器常见使用方法分析
2019/06/26 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
入党自我评价范文
2014/02/02 职场文书
校园环保标语
2014/06/13 职场文书
教师考核鉴定意见
2015/06/05 职场文书
培训计划通知
2015/07/15 职场文书
学生会干部任命书
2015/09/21 职场文书
如何拟写通知正文?
2019/04/02 职场文书