基于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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
分享精心挑选的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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
python根据文件大小打log日志
2014/10/09 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
pytorch打印网络结构的实例
2019/08/19 Python
django创建超级用户过程解析
2019/09/18 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python异步Web框架sanic的实现
2020/04/27 Python
浅析NumPy 切片和索引
2020/09/02 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
学校食品安全实施方案
2014/06/14 职场文书
体育活动总结
2015/02/04 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python