基于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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
ext jquery 简单比较
Apr 07 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
thinkphp实现数组分页示例
2014/04/13 PHP
php图片添加水印例子
2016/07/20 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python安装scipy的方法步骤
2019/06/26 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python跨文件使用全局变量的实现
2020/11/17 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
如何理解委托
2012/01/06 面试题
酒店门卫岗位职责
2013/12/29 职场文书
委托书范文
2014/04/02 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
品牌转让协议书
2014/08/20 职场文书
服务整改报告
2014/11/06 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
项目投资意向书范本
2015/05/09 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript