基于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 相关文章推荐
常用js脚本
Dec 03 Javascript
一页面多XMLHttpRequest对象
Jan 22 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
JS前端加密算法示例
Dec 22 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
开发用到的js封装方法(20种)
Oct 12 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
Terran魔法科技
2020/03/14 星际争霸
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python中title()方法的使用简介
2015/05/20 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python查看数据类型的方法
2019/10/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
什么是View State?
2013/01/27 面试题
Ajax的工作原理
2015/12/04 面试题
试用期转正鉴定评语
2014/01/27 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
服务明星事迹材料
2014/12/29 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
JavaScript实例 ODO List分析
2022/01/22 Javascript