基于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计数器代码
Nov 04 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
文员个人的求职信范文
2013/09/26 职场文书
班级学习计划书
2014/04/27 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
工作年限证明范本
2015/06/15 职场文书
领导视察通讯稿
2015/07/18 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android