基于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下高性能字符串连接StringBuffer类
Aug 16 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
使用 JavaScript 制作页面效果
Apr 21 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比较两个绝对时间的大小
2014/01/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP 实现缩略图
2021/03/09 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
python日志记录模块实例及改进
2017/02/12 Python
python实现教务管理系统
2018/03/12 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
《跨越百年的美丽》教学反思
2014/02/11 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2014年财政局工作总结
2014/12/09 职场文书
小学教师节活动总结
2015/03/20 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python