基于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的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
js给selected添加options的方法
May 06 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
javascript 中的继承实例详解
May 05 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
JS实现商品橱窗特效
Jan 09 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+DBM的同学录程序(5)
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
python机器学习库常用汇总
2017/11/15 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
如何写毕业求职自荐信
2013/11/06 职场文书
车间班组长岗位职责
2013/11/13 职场文书
党校学习思想汇报
2014/01/06 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
超市食品安全承诺书
2015/04/29 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL